Home > Developer > Ajax

Two Methods for submitting form data using jquery Ajax

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Previously, Ajax was implemented one by one using JavaScript scripts, Which is cumbersome. After learning jquery, I feel that it is not that difficult to implement Ajax. Of course, in addition to the jquery framework, there are other excellent frameworks. Here I will focus on the popular jquery. Jquery Ajax provides two methods to submit a form. One is to submit data using the URL parameter, and the other is to submit a form (the value of the form can be obtained in the background as usual ). In the form to be submitted, if there are many elements, we recommend that you use the second method for submission. Of course, if you want to practice "typing level", the first method is not acceptable, I believe developers do not want to bother themselves! No more nonsense.
First, download jquery and jquery. Form plug-ins. There are a lot of plug-ins online!
I. data submitted by URL parameters CopyCode The Code is as follows: <SCRIPT type = "text/JavaScript" src = "../JS/jquery. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
Function checkcorpid () // checks whether the customer ID is available
{
If ($. Trim ($ ("# txtf_corpid") [0]. Value) = "") // txtf_corpid is the customer ID input box
{
Alert ("Enter the customer ID! ");
}
Else
{
$ ("# Checkflag" ..html ("detecting"); // display the prompt information
$. Ajax ({
Type: "Get ",
URL: "checkcorpid. ashx ",
Data: "id =" + $. Trim ($ ("# txtf_corpid") [0]. value), // submit a form, equivalent to checkcorpid. ashx? Id = xxx
Success: function (MSG) {$ ("# checkflag" ).html (""); alert (MSG) ;}// the operation after the operation is successful! MSG is the value passed from the background.
});
}
}
</SCRIPT>

Background code:Copy codeThe Code is as follows: if (context. Request. Params ["ID"]. tostring ()! = "")
{
Pxt. Logic. SYS. corp_base_info cbil = new pxt. Logic. SYS. corp_base_info ();
Bool flag = cbil. checkcorpid (context. Request. Params ["ID"]. tostring ());
If (FLAG)
{
Context. response. Write ("this customer ID is in use! ");
}
Else
{
Context. response. Write ("this customer ID is available! ");
}
}

Ii. submit data using Form
Front-end code: Copy code The Code is as follows: <SCRIPT type = "text/JavaScript" src = "../JS/jquery. js"> </SCRIPT> // must be referenced
<SCRIPT type = "text/JavaScript" src = "../JS/jquery. Form. js"> </SCRIPT> // must be referenced
<SCRIPT type = "text/JavaScript">
// Wait for the Dom to be loaded
$ (Document). Ready (function ()
{
$ ('# Tip'). Hide (); // The elements that display the operation prompt are invisible.
$ ('# Form1'). Submit (function () // submit the form
{
// Alert ("DDD ");
VaR Options = {
Target: '# tip', // the backend will assign the passed value to this element.
URL: 'returnvisit. aspx? Flag = do ', // to which execution is submitted
Type: 'post ',
Success: function () {alert ($ ('# tip'). Text ();} // displays the operation prompt
};
$ ('# Form1'). ajaxsubmit (options );
Return false; // in order not to refresh the page, false is returned. It has been executed in the background. It's okay!
});
}
);
</SCRIPT>
<Body>
<Form ID = "form1" runat = "server">
<Div>
<Table width = "100%" border = "0" align = "center" cellpadding = "0" cellspacing = "0">
<Tr>
<TD colspan = "2" class = "tablecategory"> customer return visit </TD>
</Tr>
<Tr>
<TD width = "30%" class = "tablebg1"> customer name: </TD>
<TD class = "tablebg2">
<Asp: textbox id = "txtf_corpname" runat = "server"> </ASP: textbox>
</TD>
</Tr>
<Tr>
<TD width = "30%" class = "tablebg1"> return visit subject: </TD>
<TD class = "tablebg2">
<Asp: textbox id = "txtf_returnvisittitle" runat = "server"> </ASP: textbox>
</TD>
</Tr>
<Tr>
<TD width = "30%" class = "tablebg1"> contact: </TD>
<TD class = "tablebg2">
<Asp: textbox id = "txtf_contractperson" runat = "server"> </ASP: textbox>
</TD>
</Tr>
<Tr>
<TD width = "30%" class = "tablebg1"> contact title: </TD>
<TD class = "tablebg2">
<Asp: textbox id = "txtf_contractpersonposition" runat = "server"> </ASP: textbox>
</TD>
</Tr>
<Tr>
<TD width = "30%" class = "tablebg1"> contact number: </TD>
<TD class = "tablebg2">
<Asp: textbox id = "txtf_contractphone" runat = "server"> </ASP: textbox>
</TD>
</Tr>
<Tr>
<TD width = "30%" class = "tablebg1"> Return Visit Time: </TD>
<TD class = "tablebg2">
<Asp: textbox id = "txtf_returnvisitdate" runat = "server"> </ASP: textbox>
</TD>
</Tr>
<Tr>
<TD width = "30%" class = "tablebg1"> return visit content: </TD>
<TD class = "tablebg2">
<Asp: textbox id = "txtf_returnvisitcontent" runat = "server"> </ASP: textbox>
</TD>
</Tr>
<Tr>
<TD width = "30%" class = "tablebg1"> return visit documents: </TD>
<TD class = "tablebg2">
<Asp: textbox id = "txtf_returnvisitfile" runat = "server"> </ASP: textbox>
</TD>
</Tr>
<Tr>
<TD width = "30%" class = "tablebg1"> </TD>
<TD class = "tablebg2">
<Asp: button id = "submit_bt" runat = "server" text = "OK" cssclass = "button"/>
<Input type = "reset" class = "button" value = "Restore"/>
</TD>
</Tr>
</Table>
<Span id = "tip"> </span>
</Div>
</Form>
</Body>

Background code: Copy code The Code is as follows: protected void page_load (Object sender, eventargs E)
{
{
If (request. querystring ["flag"]! = NULL & request. querystring ["flag"]. tostring () = "do ")
{
Pxt. Logic. dbrec. returnvisit BLL = new pxt. Logic. dbrec. returnvisit ();
If (BLL. Add (model (0)> 0)
{
Response. Write ("operation successful! ");
Response. End ();
}
}
}
}
/** // <Summary>
/// Set the model as needed-> obtain the Model
/// </Summary>
/// <Param name = "ID"> id value </param>
/// <Returns> </returns>
Private pxt. model. dbrec. returnvisit model (int id)
{
// Obtain the form value
String f_corpname = request. Form ["txtf_corpname"]. tostring ();
String f_returnvisittitle = request. Form ["txtf_returnvisittitle"]. tostring ();
String f_contractperson = request. Form ["txtf_contractperson"]. tostring ();
String f_contractpersonposition = request. Form ["txtf_contractpersonposition"]. tostring ();
String f_contractphone = request. Form ["txtf_contractphone"]. tostring ();
Datetime f_returnvisitdate = datetime. parse (request. Form ["txtf_returnvisitdate"]. tostring ());
String f_returnvisitcontent = request. Form ["txtf_returnvisitcontent"]. tostring ();
String f_returnvisitfile = request. Form ["txtf_returnvisitfile"]. tostring ();
String refer = session ["username"]. tostring ();
Datetime dotime = datetime. Now. date;
Pxt. model. dbrec. returnvisit model = new pxt. model. dbrec. returnvisit ();
If (ID> 0) // modify the record. Otherwise, the record is added.
{
Model. ID = ID;
}
Model. f_corpname = f_corpname;
Model. f_returnvisittitle = f_returnvisittitle;
Model. f_contractperson = f_contractperson;
Model. f_contractpersonposition = f_contractpersonposition;
Model. f_contractphone = f_contractphone;
Model. f_returnvisitdate = f_returnvisitdate;
Model. f_returnvisitcontent = f_returnvisitcontent;
Model. f_returnvisitfile = f_returnvisitfile;
Model. Refer = refer;
Model. dotime = dotime;
Return Model;
}

Note: jquery. form is a plug-in used by jquery to help operate forms. For more information, see the tutorial online!

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
get all form data jquery how to validate form using jquery add two numbers in javascript using form statistical models and methods for lifetime data how to save data in database using ajax in php send data from javascript to php using ajax how to get data from database using ajax in struts2
Related Article
JQuery AJAX Timeout Timeout problem detailed _jquery
The difference between traditional web development patterns a...
JQuery ajax File Download _ajax
Ajax various implementation methods compare _ajax
Ajax Getting Started Guide (ii)
SPRINGMVC passing a parameter list object through Ajax or pas...

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More