How to remotely call ajax methods in jquery through JSONP

There are many tutorials on JSONP concepts and why JSONP is used. This section mainly demonstrates how to remotely call ajax methods in JQUERY through JSONP.

First, we will introduce $. ajax parameters.
Type: Request Method GET/POST
Url: request address
Async: boolean type. The default value true indicates whether the request is asynchronous. If it is false, it indicates synchronization.
DataType: returned data type
Jsonp: The parameter name passed to the request handler or page to obtain the name of the jsonp callback function (generally: callback by default)
JsonpCallback: the custom jsonp callback function name. The default value is the random function name automatically generated by jQuery. You can also enter it "? ", JQuery will automatically process the data for you
Success: Calls successfully executed Functions
Error: Exception Handling Function

1. Example 1
On the server side, we use mvc action to return data.
Copy codeThe Code is as follows:
Public class HomeController: Controller
{
//
// GET:/Home/

Public ActionResult Index ()
{
ReturnView ();
}

Public ActionResult ReturnJson ()
{
String callback = Request. QueryString ["callback"];
String json = "{'name': 'zhang san', 'age': '20 '}";
String result = string. Format ("{0} ({1})", callback, json );
ReturnContent (result );
}

}

The client uses jsonp to transmit data.
Copy codeThe Code is as follows:
@{
ViewBag. Title = "Index ";
Layout = "~ /Views/Shared/_ Layout. cshtml ";
}

<Script src = "~ /Scripts/jquery-1.7.1.min.js "type =" text/javascript "> </script>
<Script type = "text/javascript">
FunctionSendData ()
{
$. Ajax ({
Type: "get ",
Async: false,
Url: "/home/ReturnJson ",
DataType: "jsonp ",
Success: function (data ){
Alert (data. name );
},
Error: function (){
Alert ('fail ');
}
});
}
</Script>

<Input type = "button" value = "Submit" onclick = "SendData ();"/>

After you click Submit, a random function name is returned for Request. QueryString ["callback"] on the server. In this way, the data is transmitted in JSONP format.

2. Custom function name
You can customize the function name during the transfer process. You only need to use the jsonpCallback parameter.
Jsonp: indicates the passed parameter. The default value is callback. You can also customize the parameter. The server segment uses this parameter to obtain the custom function name. The server obtains the Request. queryString ["callback"]
JsonpCallback indicates the passed parameter value, that is, the callback function name, which is a custom name.
Copy codeThe Code is as follows:
<Script type = "text/javascript">
FunctionSendData (){
$. Ajax ({
Type: "get ",
Async: false,
Url: "/home/ReturnJson ",
DataType: "jsonp ",
Jsonp: "callback", // The parameter name that is passed to the request handler or page to obtain the jsonp callback function name (generally: callback by default)
JsonpCallback: "receive", // custom jsonp callback function name. The default value is the random function name automatically generated by jQuery. You can also enter "? ", JQuery will automatically process the data for you
Success: function (data ){
Alert (data. name );
},
Error: function (){
Alert ('fail ');
}
});
}

Functionreceive (data ){
Alert (data. age );
}
</Script>