Home Web Front-end JS Tutorial JQuery uses $.ajax or $.getJSON to obtain JSON data across domains.

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

Jan 15, 2018 am 11:31 AM
javascript jquery

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:

<script src="http ://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>

jQuery code:

1

2

3

4

5

6

var url=&quot;http://localhost:8000/user.php&quot;;

$(function(){

 $.getJSON(url,function(data){

 alert (data.name);

})

});

Copy after login

Server Code (PHP):

1

2

3

4

5

6

7

8

&lt;?php

header(&#39;Content-Type:text/html;Charset=utf-8&#39;);

$arr = array(

 &quot;name&quot; =&gt; &quot;xiaoming&quot;,

 &quot;pass&quot; =&gt; &quot;123456&quot;

);

echo json_encode($arr);

?&gt;

Copy after login


Server returns String :

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

JQuery obtains cross-domain JSON data

First quote the jQuery library file:

<script src="http:// apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>

jQuery code:

1

2

3

4

5

6

var url=&quot;http://localhost:8000/user.php?jsoncallback=?&quot;;

$(function(){

 $.getJSON(url,function(data){

 alert (data.name);

})

});

Copy after login

Server code (PHP):

1

2

3

4

5

6

7

8

&lt;?php

header(&#39;Content-Type:text/html;Charset=utf-8&#39;);

$arr = array(

 &quot;name&quot; =&gt; &quot;xiaoming&quot;,

 &quot;pass&quot; =&gt; &quot;123456&quot;

);

echo $_GET[&#39;jsoncallback&#39;].&quot;(&quot;.json_encode($arr).&quot;)&quot;;

?&gt;

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:

<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"> </script>

jQuery code:

1

2

3

4

5

6

7

8

9

10

11

12

13

&lt;script type=&quot;text/javascript&quot;&gt;

$(function(){

 $.ajax({

 type: &#39;get&#39;,

 url: &#39;http://localhost:8000/user.php?jsoncallback=?&#39;,

 dataType: &#39;jsonp&#39;,

 jsonp: &quot;jsoncallback&quot;,

 success: function(data) {

  alert(&quot;用户名:&quot;+ data.name+&quot; 密码:&quot;+ data.pass);

 }

 });

})

&lt;/script&gt;

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Detailed explanation of jQuery reference methods: Quick start guide Detailed explanation of jQuery reference methods: Quick start guide Feb 27, 2024 pm 06:45 PM

Detailed explanation of jQuery reference methods: Quick start guide

How to use PUT request method in jQuery? How to use PUT request method in jQuery? Feb 28, 2024 pm 03:12 PM

How to use PUT request method in jQuery?

How to remove the height attribute of an element with jQuery? How to remove the height attribute of an element with jQuery? Feb 28, 2024 am 08:39 AM

How to remove the height attribute of an element with jQuery?

jQuery Tips: Quickly modify the text of all a tags on the page jQuery Tips: Quickly modify the text of all a tags on the page Feb 28, 2024 pm 09:06 PM

jQuery Tips: Quickly modify the text of all a tags on the page

Use jQuery to modify the text content of all a tags Use jQuery to modify the text content of all a tags Feb 28, 2024 pm 05:42 PM

Use jQuery to modify the text content of all a tags

Understand the role and application scenarios of eq in jQuery Understand the role and application scenarios of eq in jQuery Feb 28, 2024 pm 01:15 PM

Understand the role and application scenarios of eq in jQuery

How to tell if a jQuery element has a specific attribute? How to tell if a jQuery element has a specific attribute? Feb 29, 2024 am 09:03 AM

How to tell if a jQuery element has a specific attribute?

Summary of commonly used file operation functions in PHP Summary of commonly used file operation functions in PHP Apr 03, 2024 pm 02:52 PM

Summary of commonly used file operation functions in PHP

See all articles