JQuery + ajax + jsonp cross-origin access, jqueryjsonp
Jsonp (JSON with Padding) is a "usage mode" in json format that allows webpages to obtain information from other domains.
For more information about Jsonp, see http://baike.baidu.com/view/4101174.htm. The following is an example:
I. Client
Html code
- <! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
- <Html>
- <Head>
- <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
- <Title> Insert title here </title>
- <Script type = "text/javascript" src = "resource/js/jquery-1.7.2.js"> </script>
- </Head>
- <Script type = "text/javascript">
- $ (Function (){
- /*
- // Abbreviated form, with the same effect
- $. GetJSON ("http://app.example.com/base/json.do? Sid = 1494 & busiId = 101 & jsonpCallback =? ",
- Function (data ){
- $ ("# Showcontent"). text ("Result:" + data. result)
- });
- */
- $. Ajax ({
- Type: "get ",
- Async: false,
- Url: "http://app.example.com/base/json.do? Sid = 1494 & busiId = 101 ",
- DataType: "jsonp", // the data type is jsonp
- Jsonp: "jsonpCallback", // parameters of the function name used by the server to receive callback calls
- Success: function (data ){
- $ ("# Showcontent"). text ("Result:" + data. result)
- },
- Error: function (){
- Alert ('fail ');
- }
- });
- });
- </Script>
- <Body>
- <Div id = "showcontent"> Result: </div>
- </Body>
- </Html>
Ii. Server Side
Java code
- Import java. io. IOException;
- Import java. io. PrintWriter;
- Import java. util. HashMap;
- Import java. util. Map;
- Import javax. servlet. http. HttpServletRequest;
- Import javax. servlet. http. HttpServletResponse;
- Import net. sf. json. JSONObject;
- Import org. springframework. stereotype. Controller;
- Import org. springframework. web. bind. annotation. RequestMapping;
- @ Controller
- Public class ExchangeJsonController {
- @ RequestMapping ("/base/json. do ")
- Public void exchangeJson (HttpServletRequest request, HttpServletResponse response ){
- Try {
- Response. setContentType ("text/plain ");
- Response. setHeader ("Pragma", "No-cache ");
- Response. setHeader ("Cache-Control", "no-cache ");
- Response. setDateHeader ("Expires", 0 );
- Map <String, String> map = new HashMap <String, String> ();
- Map. put ("result", "content ");
- PrintWriter out = response. getWriter ();
- JSONObject resultJSON = JSONObject. fromObject (map); // assemble json as needed
- String jsonpCallback = request. getParameter ("jsonpCallback"); // client request parameters
- Out. println (jsonpCallback + "(" + resultJSON. toString () + ")"); // return jsonp format data
- Out. flush ();
- Out. close ();
- } Catch (IOException e ){
- E. printStackTrace ();
- }
- }
- }
Jquery ajax can obtain json data through cross-origin, but an error is returned when json parsing. How can this problem be solved?
It seems that the jsonp access method is not provided. weather.com.cn supports the iframe method.
The jsonp type cross-Origin data of jquery ajax is used, and the returned data is never obtained.
Js error: SyntaxError: missing; before statement will be reported on the page.
See where the Chinese Semicolon is used. In addition, the error information is printed out in the error file.
Console. log (r)
