jquery submitting Form Ajax query Implementation code (1/2)

Source: Internet
Author: User
Tags http request trim ticket

The Ajax () method loads remote data through an HTTP request.

The approach is the jQuery-bottom AJAX implementation. Simple and easy-to-use high-level implementation see $.get, $.post, etc. $.ajax () returns the XMLHttpRequest object that it created. Most of the time you don't have to manipulate the function directly, unless you need to manipulate the infrequently used options for more flexibility.

In the simplest case, $.ajax () can be used directly without any parameters.

One: URL parameter submission data

The code is as follows Copy Code

<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 processing code

The code is as follows Copy Code

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!");
}
}

Basic functions: User input A form, enter the admission ticket and Verification code, verify that the user entered the form, click the query submission, and then get the returned data from the server and display

jquery Code

The code is as follows Copy Code

function loginsuccess () {

$.ajax ({

Type: "POST",

URL: "/zk/zkcj201204a",

Data: {KSBH: $ ("#ksbh"). Val ()},

Beforesend:function () {$ ("#msg"). HTML ("Loading ... Please wait while the submission is in progress. "); },

Success:function (data) {

$ ("#msg"). HTML (data). Show ();

document.getElementById ("Valicode"). src = document.getElementById ("Valicode"). src+ '? ';

}

});

}

HTML code

<div id= "Lmain" >
<div><span class= "S1" > Ticket Number: </span><span class= "S2" ><input id= "KSBH" maxlength= "Name=" "KSBH" onbeforepaste= "Clipboarddata.setdata" (' Text ', Clipboarddata.getdata (' text '). Replace (/[^d]/g, ') "onkeyup=" Value=value.replace (/[^d]/g, ') "type=" text "value=" "/></span></div>
<div><span class= "S1" > Authenticode: </span><span class= "S3" ><input id= "Yzm" name= "Yzm" type= "text" Value= "" "/></span></div>
<div style= "Text-align:center;" ><input type= "button" id= "btnsubmit" value= "Query"/> </div>
</div>
<div id= "msg" style= "width:600px;text-align:center; margin-top:20px; " ></div>


Parameters
Options
Type: Object

Optional. AJAX request settings. All options are optional.

Async
Type: Boolean

Default value: True. All requests are asynchronous requests under the default settings. If you need to send a sync request, set this option to false.

Note that the synchronization request will lock the browser and the user's other actions must wait for the request to complete before it can be executed.

Beforesend (XHR)
Type: Function

You can modify the functions of the XMLHttpRequest object before sending the request, such as adding a custom HTTP header.

The XMLHttpRequest object is the only parameter.

This is an Ajax event. If you return False, you can cancel this Ajax request.

Cache
Type: Boolean

Default value: False when True,datatype is script and Jsonp. Set to False to not cache this page.

JQuery 1.2 new features.

Complete (XHR, TS)
Type: Function

The callback function (called after the request succeeds or fails) after the request completes.

Parameters: XMLHttpRequest object and a string that describes the request type.

This is an Ajax event.

ContentType
Type: String

Default value: "Application/x-www-form-urlencoded". Content encoding type when sending information to the server.

Default values are appropriate for most situations. If you explicitly pass a content-type to $.ajax () then it will definitely be sent to the server (even if there is no data to send).

Context
Type: Object

This object is used to set the context of Ajax-related callback functions. That is, let this point in the callback function refer to this object (if this argument is not set, this will point to the options argument passed when the AJAX request is invoked). For example, a DOM element is specified as the context parameter, so that the success callback function is set to this DOM element.

Home 1 2 last page
Related Article

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.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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