About jQuery's code for using $.ajax or $.getJSON to achieve cross-domain acquisition of JSON data

JSON data can be obtained across domains through JQuery, but it must be understood that JQuery cannot obtain data in any JSON format across domains. Specific JSON data for cross-domain reading by JQuery must be output through the server. You may still have no idea about this, and that’s okay. This article will introduce this technology in the simplest and most understandable way. I believe everyone can easily understand it and can actually apply it.

This article mainly introduces the implementation code of JQuery using $.ajax or $.getJSON to obtain JSON data across domains. Friends in need can refer to it. I hope it will be useful to everyone.

JQuery obtains JSON data from the same domain

First quote the jQuery library file:

jQuery code:

var url="http://localhost:8000/user.php";
$(function(){
 $.getJSON(url,function(data){
 alert (data.name);
})
});

Server code (PHP):

<?php 
header(&#39;Content-Type:text/html;Charset=utf-8&#39;); 
$arr = array( 
 "name" => "xiaoming", 
 "pass" => "123456"
); 
echo json_encode($arr); 
?>

Server return string:

{"name":"xiaoming","pass":123456}

JQuery obtains cross-domain JSON data

First quote the jQuery library file:

jQuery code:

var url="http://localhost:8000/user.php?jsoncallback=?";
$(function(){
 $.getJSON(url,function(data){
 alert (data.name);
})
});

Server Code (PHP):

<?php 
header(&#39;Content-Type:text/html;Charset=utf-8&#39;); 
$arr = array( 
 "name" => "xiaoming", 
 "pass" => "123456"
); 
echo $_GET[&#39;jsoncallback&#39;]."(".json_encode($arr).")"; 
?>

Server returns string (need to pass in parameter "jsoncallback"):

jQuery19003894091040769696_1505708469340({"name":"xiaoming ","pass":123456})

Explanation, the value passed in by jQuery is different every time.

The difference between JQuery obtaining JSON data in the same domain and cross-domain Points:

1) The writing method of jQuery is different. When crossing domains, you need to add an extra parameter "jsoncallback=?"

2) The writing method of returning strings on the server side is different. When crossing domains, you need to use " 'jsoncallback'" input value, the constructed string format is: jsoncallback input value (original JSON string), be careful to use parentheses to wrap the original JSON string.

Summary

Through the introduction of this article, everyone should understand that if you want jQuery to read JSON data across domains, you first need to construct a special JSON string on the server side, otherwise it will not be read. Fortunately, the construction method is very simple, and the examples in the article can be understood at a glance.

jQuery + Ajax to obtain cross-domain JSON data

The previous example used $.getJSON to obtain cross-domain JSON data. In fact, we use the $.ajax method The same is possible.

First quote the jQuery library file:

jQuery code:

##

<script type="text/javascript"> 
$(function(){ 
 $.ajax({ 
 type: &#39;get&#39;, 
 url: &#39;http://localhost:8000/user.php?jsoncallback=?&#39;, 
 dataType: &#39;jsonp&#39;, 
 jsonp: "jsoncallback", 
 success: function(data) { 
  alert("用户名："+ data.name+" 密码："+ data.pass); 
 }
 }); 
}) 
</script>

Specially note that the dataType is jsonp instead of json.

Related recommendations:

Get JSON data through JS in html and load instance sharing

How to get the Json array in JS Example of array length

Solution to ajax cross-domain request: use JSONP to obtain JSON data

The above is the detailed content of About jQuery's code for using $.ajax or $.getJSON to achieve cross-domain acquisition of JSON data. For more information, please follow other related articles on the PHP Chinese website!