Jquery cross-domain method to obtain Json

This time I will bring you the method and method of Jquery cross-domain obtaining Json. What are the precautions for Jquery cross-domain obtaining Json. The following is a practical case, let's take a look.

When using Jquery to retrieve data across domains in the past two days, I often encountered the error invalid label. It was very frustrating. I could never get the json value sent back by the server.

The two methods generally used across domains are: $.ajax and $.getJSON

Finally, calm down carefully and read the json official document and found this paragraph :

JSON data is a kind of structured data that can be easily parsed through JavaScript. If the obtained data file is stored on a remote server (with different domain names, that is, cross-domain data acquisition), you need to use the jsonp type. Using this type creates a query string parameter callback=? which is appended to the requested URL. The server should add the callback function name in front of the JSON data in order to complete a valid JSONP request. If you want to specify the parameter name of the callback function to replace the default callback, you can set the jsonp parameter of $.ajax().

In fact, the principle of jquery's cross-domain is realized through external links<script>, and then the callback function is added with the parameters of the callback function to achieve true cross-domain</script>

Jquery in each The callback parameter will be included when sending a cross-domain request. In fact, the value of this parameter is the name of the callback function. Therefore, when the server sends json data, it should put this parameter in front. The value of this parameter is often randomly generated. For example: jsonp1294734708682. You can also set the name of the callback method through the $.ajax method. After understanding the principle, the server should send data like this:

string message = "jsonp1294734708682({\"userid\":0,\"username\":\"null\"})";

In this way, json data {\"userid\":0,\"username \":\"null\"} is used as a parameter of the callback function jsonp1294734708682

Let’s follow Let’s start the example

If the data is returned normally:

{ "success": [{ "id": 1, "title": "title 1" }, { "id": 2, "title": "title 2" }, { "id": 3, "title": "title 3"}] }

Let’s introduce our own parameters of jquery

/**
*@dataType (String) 
*"xml": 返回 XML 文档，可用 jQuery 处理。
*"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
*"script": 返回纯文本 JavaScript 代码。"json": 返回 JSON 数据 。
*"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
*"text": 返回纯文本字符串
*/
/**
*@jsonp (String)在一个jsonp请求中重写回调函数的名字。
*这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，
*比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
*/
/**
*@jsonpCallback (String)
*为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。
*这主要用来让jQuery生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。
*你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。
*/

1No Specify the name of jsonp,

$.ajax({
  url: 'http://lifeloopdev.info/get_events',
  dataType: "jsonp",
  data: "offset=0&num_items=10",
  username: 'username',
  password: 'password',
  success: function (data) {
    $.each(data.success, function (i, item) {
      $("body").append('<h1 id="item-title">' + item.title + '</h1>');
    });
  }
});

The server needs to return data like this. Example:

Response.ContentType="text/html; charset=utf-8";
String callback = Request.QueryString["callback"].ToString();
Response.Write(callback + "{ \"success\": [{ \"id\": 1, \"title\": \"title 1\" }, { \"id\": 2, \"title\": \"title 2\" }, { \"id\": 3, \"title\": \"title 3\"}] }");

2 Specify the name of jsonp, and the function that returns the function name,

//这里我们自己指定了jsonp的callback的名字
$.ajax({
  url: 'http://lifeloopdev.info/get_events',
  dataType: "jsonp",
  data: "offset=0&num_items=10",
  username: 'username',
  password: 'password',
  jsonp: "successCallback",
  jsonpCallback: 'successCallback'
});
function successCallback(data) {
  $.each(data.success, function (i, item) {
    $("body").append('<h1 id="item-title">' + item.title + '</h1>');
  });
}

The server needs to return data like this Example:

Response.ContentType="text/html; charset=utf-8";
String callback = Request.QueryString["successCallback"].ToString();
Response.Write(callback + "{ \"success\": [{ \"id\": 1, \"title\": \"title 1\" }, { \"id\": 2, \"title\": \"title 2\" }, { \"id\": 3, \"title\": \"title 3\"}] }");

3 Specify the jsonp name, do not specify the function that returns the function name,

$.ajax({
  url: 'http://lifeloopdev.info/get_events',
  dataType: "jsonp",
  data: "offset=0&num_items=10",
  username: 'username',
  password: 'password',
  jsonp: "successCallback",
  success: function (data) {
    $.each(data.success, function (i, item) {
      $("body").append('<h1 id="item-title">' + item.title + '</h1>');
    });
  }
});

The server needs to return data like this Example:

Response.ContentType="text/html; charset=utf-8";
String callback = Request.QueryString["successCallback"].ToString();
Response.Write(callback + "{ \"success\": [{ \"id\": 1, \"title\": \"title 1\" }, { \"id\": 2, \"title\": \"title 2\" }, { \"id\": 3, \"title\": \"title 3\"}] }");

4 Use getJSON() to obtain data ,

/**
*注意：
*这里调用的地址中jsoncallback=? 是关键的所在！其中我们关心的是 jsoncallback=? 起什么作用了？原来 jsoncallback=? 被替换后，会把方法名称传给服务器。
*我们在服务器端要做什么工作呢？服务器要接受参数 jsoncallback ，然后把 jsoncallback 的值作为 JSON 数据方法名称返回 .
*/
$.getJSON("http://192.168.20.86/friend/getMyJsonData.aspx?jsoncallback=?", function (data) {
  $.each(data.success, function (i, item) {
    $("body").append('<h1 id="item-title">' + item.title + '</h1>');
  });
});

The server needs to return data like this example:

Response.ContentType="text/html; charset=utf-8";
String callback = Request.QueryString["jsoncallback"].ToString();
Response.Write(callback + "{ \"success\": [{ \"id\": 1, \"title\": \"title 1\" }, { \"id\": 2, \"title\": \"title 2\" }, { \"id\": 3, \"title\": \"title 3\"}] }");

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the steps of asp processing json data

htmlDetailed explanation of the method of directly displaying JSON

The above is the detailed content of Jquery cross-domain method to obtain Json. For more information, please follow other related articles on the PHP Chinese website!