Before implementing Ajax using a JavaScript script one knock it out, it's tedious. After learning jquery It is not so difficult to realize Ajax, of course, apart from the jquery framework there are other excellent frameworks here I will focus on the more popular jquery. There are two ways of Jquery Ajax submission form, one is the URL parameter submission data, and the other is form submission (peace is always the same in the background can get the value of form forms). In the form you want to submit, if there are a lot of elements suggested that the second way to submit, of course, if you want to practice "typing level" words in the first way to submit also may not be, I believe the developers do not want to pay white effort! No more nonsense to put the example.
First to download Jquery, jquery.form These two plug-ins, online a lot of!
One: URL parameter submission data
Copy Code code as follows:
<script type = "Text/javascript" src = ". /js/jquery.js "></script>
<script type= "Text/javascript" >
function checkcorpid ()//Check if customer number is available
{
if ($.trim ("#txtF_CORPID") [0].value) = "")//txtf_corpid is the customer number input box
{
Alert ("Please enter customer number!");
}
Else
{
$ ("#checkFlag"). HTML ("detecting");//display of prompts
$.ajax ({
Type: "Get",
URL: "Checkcorpid.ashx",
Data: "Id=" +$.trim ($ ("#txtF_CORPID") [0].value),//Submit form, equivalent to Checkcorpid.ashx?id=xxx
Success:function (msg) {$ ("#checkFlag"). HTML (""); alert (msg); Operation after the successful operation! MSG is a backstage pass.
});
}
}
</script>
Background code:
Copy Code code 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 ("The customer number is occupied!");
}
Else
{
Context. Response.Write ("The customer number is available!");
}
}
Two: Form submission data
Foreground code:
Copy Code code 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 element that displays the action hint is not visible
$ (' #form1 '). Submit (function ()/form
{
Alert ("ddd");
var options = {
Target: ' #Tip ',//background will assign the passed value to the element.
URL: ' Returnvisit.aspx?flag=do ',//submitted to which execution
Type: ' POST ',
Success:function () {Alert ($ (' #Tip '). text ());//Show Action Tips
};
$ (' #form1 '). Ajaxsubmit (options);
return false; In order not to refresh the page, return false, anyway, has been done in the background, nothing!
});
}
);
</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 to Theme:</td>
<TD class= "TableBg2" >
<asp:textbox id= "Txtf_returnvisittitle" runat= "Server" ></asp:TextBox>
</td>
</tr>
<tr>
<TD width= "30%" class= "tableBg1" > Contact person:</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" > Tel:</td>
<TD class= "TableBg2" >
<asp:textbox id= "Txtf_contractphone" runat= "Server" ></asp:TextBox>
</td>
</tr>
<tr>
<TD width= "30%" class= "TABLEBG1" > Return time:</td>
<TD class= "TableBg2" >
<asp:textbox id= "txtf_returnvisitdate" runat= "Server" ></asp:TextBox>
</td>
</tr>
<tr>
<TD width= "30%" class= "TABLEBG1" > Return to the Content:</td>
<TD class= "TableBg2" >
<asp:textbox id= "txtf_returnvisitcontent" runat= "Server" ></asp:TextBox>
</td>
</tr>
<tr>
<TD width= "30%" class= "TABLEBG1" > Return to related 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 code 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 up model-> acquisition model according to different needs
</summary>
<param name= "id" >id value </param>
<returns></returns>
Private Pxt.Model.DBRec.ReturnVisit Model (int id)
{
Get form values
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 record, otherwise indicate increase record
{
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 plugin that Jquery uses to help manipulate forms, and specifically to look at tutorials online!
