Using jquery to submit form data across domains

We sometimes encounter this situation in web development, such as the collection of user information from a site, submitted to the B site processing, this time will be related to cross-domain submission of data issues. This article will show you how to use jquery to implement asynchronous cross-domain submission of form data.

In jquery, we use the JSON data type to get or send data from the server using the Getjson method, and to use the JSONP data type when submitting or fetching data to different remote servers. With this type, a query string parameter callback= is created? , this parameter is appended to the URL of the request. The server side should precede the JSON data with a callback function name in order to complete a valid JSONP request. If you want to specify the parameter name of the callback function instead of the default callback.

Note that JSONP is an extension in JSON format. He asked for some server-side code to detect and process query string parameters.

Html

In this example, in order to demonstrate cross-domain submission data, we assume that the A site domain name is www.helloweba.com,B site domain name demo.helloweba.com. We create a simple form on the a site that is used to submit user information.

<form id="myform" action="#" method="post"> 
   <p><label>姓名：</label><input type="text" class="input" name="username" /></p> 
   <p><label>性别：</label><input type="radio" name="sex" value="1" checked="checked" /> 男生 
    <input type="radio" name="sex" value="2" /> 女生 </p> 
   <p><label>年龄：</label><input type="text" class="input" name="age" /></p> 
   <p><input type="submit" class="btn" value="提 交" /></p> 
</form>  

Jquery

When the user fills out the form and clicks the "Submit" button, use jquery to get the form information and submit it to the B site via Getjson, see the code:

$ (function () {
$ ("#myform"). Submit (function () {
var data = $ (this). Serialize (); Serialization of form data
$.getjson ("http://demo.helloweba.com/jsonp.php?callback=?", Data,function (JSON) {
var msg = ';
if (JSON) {
var sex = json.sex==1? "Boys": "Girls";
msg = "<div id= ' result ' ><strong> submitted successfully! </strong><br/> Name:
"+json.username+" <br/> Gender: "+sex+" <br/> Age: "+json.age+" </div> "
}else{
msg = "Server busy, please wait and try again!" ";
}
$ ("#myform"). After (msg); After inserting the returned information into the corresponding element of the page
});
return false;
});
});

As you can see from the code, you first serialize the form data, get the form data in JSON format, and then send the data to the B site url:http://demo.helloweba.com/jsonp.php?callback= via Getjson? Notice there's a callback= behind the URL. Converts the request to a JSONP request. The response is then based on the B site processing results, and the response results are dynamically displayed on the form submission page of the A site.

Php

In this example, the jsonp.php program of the B site obtains form data submitted by a Web site and processes the data as necessary (filtering and inserting the data into the database if necessary), and then returns the JSON-formatted data to the form submission page of the A site.

$result[‘username‘] = $_GET[‘username‘]; 
$result[‘sex‘] = $_GET[‘sex‘]; 
$result[‘age‘] = $_GET[‘age‘]; 
echo $_GET[‘callback‘].‘(‘.json_encode($result).‘)‘; 

If the processing succeeds, a string is returned: jsonp1331385001001 ({"username": "\u5929\u70ed\u7279", "Sex": "1", "Age": "28"}).

In many places to apply to cross-domain submission data technology, then cross-domain upload attachments (tablets, etc.), is it possible to use Getjson to achieve it?

Using jquery to submit form data across domains