jQuery-JSONP 插件跨域调用功能(Uncaught SyntaxError: Unexpected token : 出错原因解释)
2016-09-26 17:47
513 查看
插件介绍:众所周知,使用ajax直接发起请求存在跨域无权限访问的问题,这时候,需要使用jsonp协议(非官方的协议)处理,jQuery中的.ajax方法也直接支持使用该协议进行跨域访问。下面首先介绍使用jQuery的.ajax方法进行跨域访问,然后再介绍使用其它jQuery插件(jQuery-JSONP)实现样的功能。
1、新建一个jsp页面,加入一段js代码内容如下:
再添加一个按钮用来测试该js方法,如下:
说明:当点击 ajaxtest 按钮时,就会发起一个请求,由url、dataType、jsonp等参数可知,ajax使用jsonp协议向 http://192.168.10.111/demo/testjson 这个地址发起请求,并自动在url后追加callback参数,实际请求的url地址应为:http://192.168.10.111/demo/testjson?rel=13&callback=success_jsonp,请求超时时间为3秒,接收的数据为json格式字符串。如果成功接收到远程方法返回的json数据并且格式正确的话,首先会进入dataFilter方法(你可以在这个方法内对返回的json数据进行预处理,比如过滤、更改json数据等),然后进入success方法;如果请求失败或者返回的json数据格式不正确的话会直接进入error方法。
那么服务端的testjson方法应该返回什么样的数据呢?直接返回json对象或json字符串是不对的!还需要在之前加上请求时传过来的callback的参数值,后台(以servlet为例)应类似如下处理:
这样后台响应的的数据实际为:success_jsonp({“id”:”3”, “name”:”zhangsan”, “telephone”:”13612345678”}) 其中success_jsonp取决于ajax参数值的设定,如果未设定,jQuery将会自动生成一个名字作为callback的参数值。总之,后台只需request接收parameter后,动态拼接callback变量的值就可以了。
如果返回的数据格式不按上述讲的这样,请求就会失败并直接进入ajax的error方法。像 Uncaught SyntaxError: Unexpected token : 类似这种错误就是返回的json数据没用“(”和“)”小括号包起来或者前面没加callback值而引起的。
跨域调用功能除了用Query的$.ajax方法可以实现外,网络上还有其它众多的jQuery插件可以完成,下面就来看一下使用jQuery的jsonp插件来进行跨域调用:
首先在之前创建的jsp页面中引入jQuery-JSONP插件并加入jsonptest测试方法,下载地址:https://github.com/jaubourg/jquery-jsonp
再添加一个按钮用来测试该js方法,如下:
说明:点击jsonptest按钮后,控制台打印出来的效果和使用ajax方法时的基本一致,不同的是dataFilter方法:虽然二者都提供了dataFilter方法,但.jsonp的dataFilter中数据已经直接转换成json对象了,而.ajax的dataFilter中获取的却是原生的带callback方法名的json字符串(测试时控制台打印出来的是undefined)。如果需要对返回的数据做预处理的话,建议使用jQuery−JSONP插件的.jsonp方法。
前面介绍了用servlet编写testjson方法,假设你对nutz框架(http://code.google.com/p/nutz/)熟悉的话,下面贴出使用nutz框架编写testjson方法:
注意:如果你在MainModule中设置了全局的返回类型为json的话(@Ok(“json”)),那么testjson方法上需要加上@Ok(“raw”)注解,不做解释,不明白可以看nutz官方文档。
1、新建一个jsp页面,加入一段js代码内容如下:
[javascript] view plain copy <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>
再添加一个按钮用来测试该js方法,如下:
<input type="button" value="ajaxtest" onclick="ajaxtest()"/>
说明:当点击 ajaxtest 按钮时,就会发起一个请求,由url、dataType、jsonp等参数可知,ajax使用jsonp协议向 http://192.168.10.111/demo/testjson 这个地址发起请求,并自动在url后追加callback参数,实际请求的url地址应为:http://192.168.10.111/demo/testjson?rel=13&callback=success_jsonp,请求超时时间为3秒,接收的数据为json格式字符串。如果成功接收到远程方法返回的json数据并且格式正确的话,首先会进入dataFilter方法(你可以在这个方法内对返回的json数据进行预处理,比如过滤、更改json数据等),然后进入success方法;如果请求失败或者返回的json数据格式不正确的话会直接进入error方法。
那么服务端的testjson方法应该返回什么样的数据呢?直接返回json对象或json字符串是不对的!还需要在之前加上请求时传过来的callback的参数值,后台(以servlet为例)应类似如下处理:
public void testjson(HttpServletRequest request, HttpServletResponse response) { String callback = (String)request.getParameter("callback"); String jsonData = "{\"id\":\"3\", \"name\":"zhangsan", \"telephone\":"13612345678"}";//为了演示效果,json数据是写死的 String retStr = callback + "(" + jsonData + ")"; response.getWriter().print(retStr); }
这样后台响应的的数据实际为:success_jsonp({“id”:”3”, “name”:”zhangsan”, “telephone”:”13612345678”}) 其中success_jsonp取决于ajax参数值的设定,如果未设定,jQuery将会自动生成一个名字作为callback的参数值。总之,后台只需request接收parameter后,动态拼接callback变量的值就可以了。
如果返回的数据格式不按上述讲的这样,请求就会失败并直接进入ajax的error方法。像 Uncaught SyntaxError: Unexpected token : 类似这种错误就是返回的json数据没用“(”和“)”小括号包起来或者前面没加callback值而引起的。
跨域调用功能除了用Query的$.ajax方法可以实现外,网络上还有其它众多的jQuery插件可以完成,下面就来看一下使用jQuery的jsonp插件来进行跨域调用:
首先在之前创建的jsp页面中引入jQuery-JSONP插件并加入jsonptest测试方法,下载地址:https://github.com/jaubourg/jquery-jsonp
[javascript] view plain copy <script type="text/javascript" src="jquery.jsonp.js"></script> <script type="text/javascript"> function jsonptest(){ $.jsonp({ url:'http://192.168.10.111/demo/testjson', data:{rel:13}, callbackParameter:"callback", timeout:3000, dataFilter:function(json){ console.log("jsonp.filter:"+json.name); json.name = "测试123435"; return json; }, success:function(json,textStatus,xOptions){ console.log("jsonp.success:"+json.name); }, error:function(xOptions,textStatus){ console.log("jsonp.error:"+textStatus+", rel="+xOptions.data.rel); } }); }
再添加一个按钮用来测试该js方法,如下:
<input type="button" value="jsonptest" onclick="jsonptest()"/>
说明:点击jsonptest按钮后,控制台打印出来的效果和使用ajax方法时的基本一致,不同的是dataFilter方法:虽然二者都提供了dataFilter方法,但.jsonp的dataFilter中数据已经直接转换成json对象了,而.ajax的dataFilter中获取的却是原生的带callback方法名的json字符串(测试时控制台打印出来的是undefined)。如果需要对返回的数据做预处理的话,建议使用jQuery−JSONP插件的.jsonp方法。
前面介绍了用servlet编写testjson方法,假设你对nutz框架(http://code.google.com/p/nutz/)熟悉的话,下面贴出使用nutz框架编写testjson方法:
[java] view plain copy @At("/testjson") @Ok("raw") public String testjson(HttpServletRequest req, String callback, String rel) throws Exception { Map<String, String> jsonMap = new LinkedHashMap<String, String>(); jsonMap.put("id", "3"); jsonMap.put("name", "zhangsan"); jsonMap.put("telephone", "13612345678"); jsonMap.put("rel", rel); String jsonp = callback + "(" + Json.toJson(jsonMap) + ")"; return jsonp; }
注意:如果你在MainModule中设置了全局的返回类型为json的话(@Ok(“json”)),那么testjson方法上需要加上@Ok(“raw”)注解,不做解释,不明白可以看nutz官方文档。
相关文章推荐
- Nutz 框架下 测试 jQuery-JSONP 插件跨域调用功能(Uncaught SyntaxError: Unexpected token : 出错原因解释)
- jQuery-JSONP 插件跨域调用功能(Uncaught SyntaxError: Unexpected token : 出错原因解释)
- ajax 跨域 jsonp对返回的json格式报错"Uncaught SyntaxError: Unexpected token :"
- java jsonp 跨域 Uncaught SyntaxError: Unexpected token :
- jsonp 跨域 Uncaught SyntaxError: Unexpected token : 的问题
- Uncaught SyntaxError: Unexpected token }提示第二行<html>出错
- ajax跨域访问-jsonp报错:Uncaught SyntaxError: Unexpected token":"or"<"or"{"
- jquery $.ajax SyntaxError: invalid label /Uncaught SyntaxError: Unexpected token :
- js里方法调用传参长字符串时为对象或者Uncaught SyntaxError: Unexpected token ILLEGAL
- json格式字符串用jquery.parseJSON()出现的问题 Uncaught SyntaxError: Unexpected token ' Uncaught SyntaxError: Une
- jquery ajaxfileupload 上传控件 Uncaught SyntaxError: Unexpected token < 问题
- 跨域请求报错 Uncaught SyntaxError: Unexpected token :
- jquery使用ajax报错[Uncaught SyntaxError: Unexpected token :]
- 加入跨域支持后ajax请求返回Uncaught SyntaxError: Unexpected token :
- Uncaught SyntaxError: Unexpected token &lt;
- 解决Ajax请求出现Uncaught SyntaxError: Unexpected token : 错误
- JS错误:Uncaught SyntaxError: Unexpected token ILLEGAL
- jquery使用jsonp进行跨域调用
- JS错误:Uncaught SyntaxError: Unexpected token ILLEGAL
- 【转载】一个通过JSONP跨域调用WCF REST服务的例子(以jQuery为例)