JSONP cross-domain access servlet interface to get JSON array, and render data, front and back end complete

Ah hahaha haha haha haha haha i am too excited ~ Actually this work I have been delaying ah, I think wow, it is difficult ah, do not want to do = =

Then bite the bullet to study a whole afternoon + night finally made clear ~ ~ ~ Wow haha haha ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ (Crazy! ）

JSON, JSONP, jQuery Ajax These things say the definition I am not a special study, only know a general, not to copy the encyclopedia, not interesting.

first, the need to say what I want to do , come up on the code of the masturbate many people are crazy (like me this afternoon--| | ）

　　Intent: The local server-side servlet generates JSON data, and I want to get JSON data on the front-end and render it as a list display.

Then the local server and front end if placed in a unified domain name and different domain name is two cases.

I will also explain these two cases in detail below.

Second, the preparation of JSON data (if it has been generated, you can skip)

Small program of micro-ticket front and back end of the simple version + five days of practical training Summary This article has been able to generate JSON data in the servlet, Google Chrome installed Jsonview can see

(Note: The database and the like are self-built, the method of obtaining JSON data can be Baidu or reference small program of micro-ticket front and back end of the simple version + five days of practical training summary)

What is generated here is actually called a JSON array, and at the end of the loop, it is important to see whether an array or an object is necessary because the array is going to write a double traversal.

Third, the front-end files and servlet in the same domain case

This means that under the same project:

Important Code blocks:

Front-end HTML file:

<div id= "box" ><div>

　　

<script type= "Text/javascript" > $ (document). Ready (function () {$.ajax ({                    Type: "POST",//Request URL: "Http://127.0.0.1:8080/soga/GetInfo?type=resourse",//address, is the request path of the JSON file DataType: "JSON",//data type can be text XML JSON script JSONP success:function (data) {Data=eval (d                ATA), Addbox (data), alert (data),//alert function cannot parse JSON object},error:function () {alert (' fail ');}            });            }); function Addbox (Result) {//result is a collection, so you need to traverse $.each (Result,function (index1,values) {$.each ( Values,function (index,obj) {$ ("#box"). Append ("<tr>" +//Get video Address "<td>&lt                        ; a src= "+obj.resourse_path+" > "+obj.word+" </a></td> "+" <td></td> "+                "<td> > </td>" + "</tr>");});          });  } </script>　　 

There's no need to change anything in the servlet!

Test:

Can't you? Why?

Please look at the script in the 127.0.0.1 and here the localhost in Jsonp here is considered to be different domain!! So:

Ok!

Iv. different domains

I moved the front-end file home,

Callback is very important for JSONP!!

Front end not only to change, servlet also to change!!

<script type= "Text/javascript" > $ (document). Ready (function () {$.ajax ({ Type: "GET",//Request URL: "Http://127.0.0.1:8080/soga/GetInfo?type=resourse",//address, is the request path of the JSON filedataType: "Jsonp",//data type can be a text XML JSON script JSONP JSONP: "Callback", Jsonpcallback: "Messag E ",///Custom JSONP callback function name, default to jquery automatically generated random function name, can also write"? ", jquery will automatically process the data for youSuccess:function (data) {data=eval (data); Addbox (data); data=json.stringify (data);//alert function cannot parse the JSON object.                So need to convert},error:function () {alert (' fail ');}                });                 /*.get ("Http://localhost:8080/soga/GetInfo?type=resourse", function (Result) {//result data is added to the box container;                 Addbox (result);            });*/            }); function Addbox (Result) {//result is a collection, so you need to traverse $.each (Result,function (index1,values) {$.each ( Values,function (index,obj) {$ ("#box"). Append ("<tr>" +//Get video Address "<td>&lt                        ; a src= "+obj.resourse_path+" > "+obj.word+" </a></td> "+" <td></td> "+                "<td> > </td>" + "</tr>");});            }); } </script>

The servlet code in the above mentioned blog, the following is the place to modify.

Well, test it.

Yes, I can!

JSONP cross-domain access servlet interface to get JSON array, and render data, front and back end complete