频道导航

解决Ajax请求出现Uncaught SyntaxError: Unexpected token : 错误

2020-05-23 Ajax 前端之家

前端之家收集整理的这篇文章主要介绍了解决Ajax请求出现Uncaught SyntaxError: Unexpected token : 错误，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

转载自：http://blog.csdn.net/wqmain/article/details/8905287

一：问题引入

插件介绍：众所周知，使用ajax直接发起请求存在跨域无权限访问的问题，这时候，需要使用jsonp协议（非官方的协议）处理，jQuery中的$.ajax方法也直接支持使用该协议进行跨域访问。下面首先介绍使用jQuery的$.ajax方法进行跨域访问，然后再介绍使用其它jQuery插件（jQuery-JSONP）实现样的功能。

1、新建一个jsp页面，加入一段js代码内容如下：

[javascript]view plaincopyprint? 
   
 <scripttype="text/javascript">
 functionajaxtest(){
 $.ajax({
 url:'http://192.168.10.111/demo/testjson',
 data:{rel:13},
 dataType:"jsonp",153); list-style:decimal-leading-zero outside; color:inherit; line-height:17.600000381469727px; margin:0px!important; padding:0px 3px 0px 10px!important"> jsonp:"callback",
 jsonpCallback:"success_jsonp",153); list-style:decimal-leading-zero outside; color:inherit; line-height:17.600000381469727px; margin:0px!important; padding:0px 3px 0px 10px!important"> timeout:3000,119); line-height:17.600000381469727px"> dataFilter:function(json){
 console.log("jsonp.filter:"+json);
 returnjson;
 },119); line-height:17.600000381469727px"> success:function(json,textStatus){
"jsonp.success:"+json.name);
 },
 error:function(XMLHttpRequest,textStatus,errorThrown){
 console.log("jsonp.error:"+textStatus);
 }
 });
 </script>

再添加一个按钮用来测试该js方法，如下：

[html]? 
   

<inputtype="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为例）应类似如下处理：

[java]? 
   
 publicvoidtestjson(HttpServletRequestrequest,HttpServletResponseresponse){
 Stringcallback=(String)request.getParameter("callback");
 StringjsonData="{\"id\":\"3\",\"name\":"zhangsan",\"telephone\":"13612345678"}";//为了演示效果，json数据是写死的
 StringretStr=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

? 
   @H_365_403@ 
   

src=

"jquery.jsonp.js"

></script>

<scripttype="text/javascript">
functionjsonptest(){
$.jsonp({
url: data:{rel:13},153); list-style:decimal-leading-zero outside; color:inherit; line-height:17.600000381469727px; margin:0px!important; padding:0px 3px 0px 10px!important"> callbackParameter: timeout:3000,153); list-style:decimal-leading-zero outside; color:inherit; line-height:17.600000381469727px; margin:0px!important; padding:0px 3px 0px 10px!important"> dataFilter:function(json){
"jsonp.filter:"+json.name);
json.name="测试123435";
error:function(xOptions,textStatus){
"jsonp.error:"+textStatus++xOptions.data.rel);
}

再添加一个按钮用来测试该js方法，如下：

?

<inputtype="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方法：

?

@At("/testjson")

@Ok("raw")
publicStringtestjson(HttpServletRequestreq,Stringcallback,Stringrel)throwsException{
Map<String,String>jsonMap=newLinkedHashMap<String,String>();
jsonMap.put("id","3");
jsonMap.put("name",0); background-color:inherit">"zhangsan");
"telephone",0); background-color:inherit">"13612345678");
"rel",rel);
Stringjsonp=callback+"("+Json.toJson(jsonMap)+")";
returnjsonp;
}

注意：如果你在MainModule中设置了全局的返回类型为json的话（@Ok("json")），那么testjson方法上需要加上@Ok("raw")注解，不做解释，不明白可以看nutz官方文档。原文链接：https://www.f2er.com/ajax/165962.html

上一篇：Ajax表单提交乱码问题下一篇：使用DWR后。在Frame框架中。会重新

猜你在找的Ajax相关文章

网页的异步请求（Ajax）

JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求兼容性问题利用iframe模拟ajax 实现表...

作者：前端之家时间：2021-01-14

手动实现AJAX

AJAX 每日更新前端基础，如果觉得不错，点个star吧 😃 https://github.com/Win...

作者：前端之家时间：2020-12-19

axios异步提交表单数据的不同形式

踩坑Axios提交form表单几种格式前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...

作者：前端之家时间：2020-12-12

php的ajax简单实例

很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...

作者：前端之家时间：2020-11-11

Json与Ajax(注册实例）

需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: "./serv...

作者：前端之家时间：2020-11-07

jSon和Ajax登录功能，ajax数据交互案例

ajax实例，检测用户与注册检测用户名是否被占用：在用户填写完用户名之后，ajax会异步向...

作者：前端之家时间：2020-11-07

关于AjaxControlToolkit的样式问题

网(LieHuo.Net)教程技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...

作者：前端之家时间：2020-11-04

一个简单的AJAX实现(HELLO AJAX)

客户端部分： <html> <head> <meta http-equiv="Content-Type" ...

作者：前端之家时间：2020-11-04

AJAX中文乱码的两类问题及解决之策

1）发送路径中的参数有中文，在服务器段接收参数值是乱码例如： var url=”a.jsp?na...

作者：前端之家时间：2020-11-04

实例：AJAX返回xml代码如何在网页中显示

建站学院（LieHuo.Net）文档今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...

作者：前端之家时间：2020-11-04

最新文章