Jquery Ajax Concise way to submit form form

Last Update:2017-01-13 Source: Internet

Author: User

Tags html page

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

This is the simplest.

The code is as follows	Copy Code
$.post ("/index.php?action=ajax&rs=twproajax::checkprotermsexisted", $ (this). Serialize (), function (data) { }, ' json ');

Note that serialize is submitting all your form input in post form or get form, and look at the example below

We have a very common form:

First, create a new login.html page:

The code is as follows

Copy Code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>$.ajax () method sends request </title>
<script type= "Text/javascript" src= "Scripts/jquery-1.4.1.js" ></script>
<style type= "Text/css" >
Body
{
font-size:13px;
}
. divframe
{
width:225px;
Border:solid 1px #666;
}
. Divframe. Divtitle
{
padding:5px;
Background-color: #eee;
height:23px;
}
. Divframe. Divtitle span
{
Float:left;
padding:2px;
padding-top:5px;
}
. Divframe. divcontent
{
padding:8px;
Text-align:center;
}
. divframe. divcontent. clsshow
{
font-size:14px;
Line-height:2.0em;
}
. divframe. divcontent. Clsshow. Clserror
{
font-size:13px;
Border:solid 1px #cc3300;
padding:2px;
Display:none;
margin-bottom:5px;
Background-color: #ffe0a3;
}
. txt
{
border: #666 1px solid;
padding:2px;
width:150px;
margin-right:3px;
}
. btn
{
border: #666 1px solid;
padding:2px;
width:50px;
}
</style>
<script type= "Text/javascript" >
$ (function () {
$ ("#txtName"). focus ();//input focuses
$ ("#txtName"). KeyDown (function (event) {
if (Event.which = = "13") {//Enter, move cursor to Password box
$ ("#txtPass"). focus ();
}
});
$ ("#txtPass"). KeyDown (function (event) {
if (Event.which = = "13") {//Enter, submitting form with. Ajax
$ ("#btnLogin"). Trigger ("click");
}
});
$ ("#btnLogin"). Click (function () {//Log on button clicks event
Get user Name
var strtxtname = encodeURI ($ ("#txtName"). Val ());
Get input password
var Strtxtpass = encodeURI ($ ("#txtPass"). Val ());
Start sending data
$.ajax
({//Request Login Processing page
URL: "Login.aspx",//Login Processing page
DataType: "HTML",
Transfer Request data
Data: {txtname:strtxtname, Txtpass:strtxtpass},
Success:function (strvalue) {//Login successful after the data returned
Show status based on return value
if (strvalue = = "true") {//Note is true, not true
$ (". Clsshow"). HTML ("Action prompt, login successful!"). "+ strvalue);
}
else {
$ ("#divError"). Show (). HTML ("User name or password error!"). "+ strvalue);
}
}
})
})
})
</script>
<body>
<form id= "Frmuserlogin" >
<div class= "Divframe" >
<div class= "Divtitle" >
<span> User Login </span>
</div>
<div class= "Divcontent" >
<div class= "Clsshow" >
<div id= "Diverror" class= "Clserror" >
</div>
<div>
Name: <input id= "txtname" type= "text" class= "TXT"/></div>
<div>
Password: <input id= "Txtpass" type= "password" class= "TXT"/></div>
<div>
<input id= "Btnlogin" type= "button" value= "Login" class= "BTN"/> &nbsp
<input id= "btnreset" type= "reset" value= "Cancel" class= "Btn"/>
</div>
</div>
</div>
</div>
</form>
</body>

Then, create a new login.aspx to receive and process the data

The code is as follows

Copy Code

: <%@ Page language= "C #" autoeventwireup= "true" codebehind= "Login.aspx.cs" inherits= "Jsdemo.login" responseencoding= "gb2312"%>

<%
String strName = System.Web.HttpUtility.UrlDecode (request["txtname"]);
String strpass = System.Web.HttpUtility.UrlDecode (request["Txtpass"]);
BOOL login = false;
if (strName = "admin" && strpass = = "Admin")
{
Login = true;
}
Response.Write (login);
%>

The key is the following code

The code is as follows

Copy Code

$ ("#btnLogin"). Click (function () {//Log on button clicks event
Get user Name
var strtxtname = encodeURI ($ ("#txtName"). Val ());
Get input password
var Strtxtpass = encodeURI ($ ("#txtPass"). Val ());
Start sending data
$.ajax
({//Request Login Processing page
URL: "Login.aspx",//Login Processing page
DataType: "HTML",
Transfer Request data
Data: {txtname:strtxtname, Txtpass:strtxtpass},
Success:function (strvalue) {//Login successful after the data returned
Show status based on return value
if (strvalue = = "true") {//Note is true, not true
$ (". Clsshow"). HTML ("Action prompt, login successful!"). "+ strvalue);
}
else {
$ ("#divError"). Show (). HTML ("User name or password error!"). "+ strvalue);
}
}
})

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.

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