Resolving Ajax requests appears uncaught syntaxerror:unexpected token: Error __ajax

Source: Internet
Author: User
Tags json

Reprinted from: http://blog.csdn.net/wqmain/article/details/8905287 One: Problem introduction

Plugin Introduction: It is well known that the use of Ajax directly to initiate requests for cross-domain access without permission, this time, need to use the JSONP Protocol (unofficial Protocol) processing, jquery in the $.ajax method also directly supports the use of the Protocol for cross-domain access. The following first describes cross-domain access using the $.ajax method of jquery, and then introduces the functionality of using other jquery plug-ins (JQUERY-JSONP) to implement the sample.


1, create a new JSP page, add a section of JS code content as follows:

[JavaScript] view plaincopyprint? <script type= "Text/javascript" >     function ajaxtest ()  {      $.ajax ({        url: ' Http://192.168.10.111/demo/testjson ',         data:{rel:13},        datatype: "Jsonp",         jsonp: "Callback",         Jsonpcallback: "Success_jsonp",        timeout:3000,        datafilter:function (JSON) {             Console.log ("Jsonp.filter:" +json);            return  json;        },        success: function (json,textstatus) {            console.Log ("jsonp.success:" +json.name);        },         error:function (xmlhttprequest,textstatus,errorthrown) {             console.log ("Jsonp.error:" +textstatus);        }     );    }     </script>   

Then add a button to test the JS method, as follows:

[HTML] view Plaincopyprint? <input type= "button" value= "Ajaxtest" onclick= "ajaxtest ()"/> Description: When the Ajaxtest button is clicked, a request is initiated by the URL, DataType, Jsonp and other parameters, Ajax use JSONP protocol to http://192.168.10.111/demo/testjson this address to initiate the request, and automatically append callback parameters after the URL, the actual requested URL address should be:/HTTP 192.168.10.111/DEMO/TESTJSON?REL=13&CALLBACK=SUCCESS_JSONP, the request time-out is 3 seconds, and the received data is a JSON-formatted string. If the JSON data returned by the remote method is successfully received and is well-formed, the first step is to enter the Datafilter method (you can preprocess the returned JSON data in this method, such as filtering, changing JSON data, etc.), and then enter the Success method If the request fails, or if the JSON data returned is malformed, it goes directly to the error method.

So what kind of data should be returned by the Testjson method on the server? It is not right to return a JSON object or JSON string directly. You also need to add the callback parameter values that were passed in before the request, and the background (in the case of servlets) should be treated like this:

[Java] view Plaincopyprint? public void Testjson (HttpServletRequest request, HttpServletResponse response) {String callback = (string) request.g       Etparameter ("callback"); String jsondata = "{\" id\ ": \" 3\ ", \" name\ ":" Zhangsan ", \" telephone\ ":" 13612345678 "}";//To demonstrate the effect, the JSON data is a dead String RetS  TR = callback + "(" + Jsondata + ")";   Problem Solving Method Response.getwriter (). print (RETSTR); }

The data for this background response is actually: Success_jsonp ({"id": "3", "Name": "Zhangsan", "Telephone": "13612345678"}) where Success_ Jsonp depends on the setting of the Ajax parameter value, and if not set, jquery will automatically generate a name as the parameter value of the callback. In short, the background only need to receive parameter after the request, dynamic stitching callback variable value on it.

If the returned data format does not follow the above, the request will fail and go directly to the Ajax error method. Like uncaught syntaxerror:unexpected token: A similar error is that the JSON data returned does not have the "(" and ")" parentheses wrapped up or preceded by a callback value.


Second: Use other plugins

Cross-domain Call function in addition to the $.ajax method of query can be implemented, there are many other jquery plug-ins on the network can be done, the following is the use of jquery Jsonp plug-in to make cross-domain calls:

First introduce the JQUERY-JSONP plugin in the previously created JSP page and add the Jsonptest test method, download address: Https://github.com/jaubourg/jquery-jsonp

[JavaScript] view Plaincopyprint? <script type= "Text/javascript" sr

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.