JQuery uses $.ajax or $.getJSON to obtain JSON data across domains.-JS Tutorial-php.cn

JQuery uses $.ajax or $.getJSON to obtain JSON data across domains.

韦小宝

Release： 2018-01-15 11:31:16

Original

1724 people have browsed it

This article mainly introduces the implementation code of JQuery using $.ajax or $.getJSON to obtain JSON data across domains. Friends who are not familiar with jquery can refer to this article

JSON data can be obtained across domains through JQuery, but it must be made clear 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.

JQuery gets JSON data from the same domain

FirstreferencejQuery library file:

jQuery code:

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

Copy after login

Server Code (PHP):

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

Copy after login

Server returns 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);
})
});

Copy after login

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).")"; 
?>

Copy after login

The server returns a string (the parameter "jsoncallback" needs to be passed in):

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

Note that 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 in 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,

Construction method

is very simple, and you can understand it at a glance with the examples in the article.

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>

Copy after login

Specially note that the dataType is jsonp instead of json.

Related recommendations:

JavaScript data structure single linked list and circular linked list example sharing

Detailed explanation of JavaScript setters and getters

javascript modification browser title method example sharing

The above is the detailed content of JQuery uses $.ajax or $.getJSON to obtain JSON data across domains.. For more information, please follow other related articles on the PHP Chinese website!