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>< ; 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>< ; 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