1.前端代码
SSM框架下的jsp文件代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.util.*"%>
<%
String path = request.getContextPath();
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="<%=path%>/js/jquery.min.js"></script>
</head>
<body>
<button name="butt1" >提交</button>
<script type="text/javascript">
$(function () {
$("button[name='butt1']").click(function () {
$.ajax({
url: "<%=path%>/get/submit",
//从前端传送过去的数据是json格式的字符串
data:JSON.stringify({"id":1,"Number":"1255655","Flag":"illegalID"}),
type: "POST",
contentType: "application/json;charset=utf-8",
success: function (data) {
//后端返回的数据
for(var i = 0; i < JSON.parse(data).length; i++)
{
console.log(JSON.parse(data)[i]["id"])
console.log(JSON.parse(data)[i]["Number"])
console.log(JSON.parse(data)[i]["Flag"])
}
},
//一定要有状态码,知道哪里出错
error: function (XMLHttpRequest, textStatus, errorThrown) {
// 状态码
console.log(XMLHttpRequest.status);
// 状态
console.log(XMLHttpRequest.readyState);
// 错误信息
console.log(textStatus);
}
});
});
})
</script>
</body>
</html>
2.后端代码
在后端java文件新建一个InterDataController.java文件,并在该controller文件里专门进行ajax后端代码的实现。
@Controller
@RequestMapping("")
public class InterDataController
{
@Autowired
IllegalIDService illegalIDService;
//处理json提交
@RequestMapping(value = "/get/submit")
@ResponseBody
public String Submit(@RequestBody String req)
{
System.out.println(req);
JSONArray jsonArray = new JSONArray();
JSONObject jsonObject1 = new JSONObject();
//返回去的数据
jsonObject1.put("id", "1");
jsonObject1.put("Number", "2356256");
jsonObject1.put("Flag", "illegalID");
JSONObject jsonObject2 = new JSONObject();
jsonObject2.put("id", "2");
jsonObject2.put("Number", "23456256");
jsonObject2.put("Flag", "legalID");
jsonArray.put(jsonObject1);
jsonArray.put(jsonObject2);
return jsonArray.toString();
}
}
3.SSM+ajax+json注意事项
1)Ajax基础知识
- $.ajax()
采用参数集的方式 {param1,param2,param3} 不同的参数之间用,隔开
第一个参数 url:page 表示访问的是page页面
第二个参数 data:{name:value} 表示提交的参数
第三个参数 success: function(){} 表示服务器成功返回后对应的响应函数
- 其他的可参考 https://how2j.cn/k/jquery/jquery-ajax/474.html
2) responseBody方法
responseBody一般是作用在方法上的,加上该注解表示该方法的返回结果直接写到Http response Body中,常用在ajax异步请求中。
在RequestMapping中 return返回值默认解析为跳转路径,如果你此时想让Controller返回一个字符串或者对象到前台 就会报404 not response的错误。
当加上@ResponseBody注解后不会解析成跳转地址 会解析成相应的json格式的对象 集合 字符串或者xml等直接返回给前台 可以通过 ajax 的“success”:fucntion(data){} data直接获取到
3)json字符串和json对象
这里说明一下json字符串和json对象时两个不同的概念:
- var user ={“userName”:“张三”,“age”:“18”} 这里user 是一个json对象,类型是object 可以通过user.name和user.age取到对应的值
- var user1= ‘{“userName”:“张三”,“age”:“18”}’ 这里user1 就是一个字符串,是符合{k:v,k:v}这种json格式的字符串而已,不能通过上面那种方式取值。
可以通过一定的方法相互转换:
-
json对象转json字符串
1、可以直接单引号 2、通过JSON.stringify(xxx) -
json字符串转json对象:JSON.parse(xxxx)
3) jQuery Ajax 实例
select放在form里面form提交的时候会把select当做普通的文本框input处理,在后台直接request.getParameter是可以获取的
4)网页常见错误
https://www.cnblogs.com/mqy1/p/6632713.html
一般常见的错误 是 400 404 500 对应请求参数错误 找不到页面 和内部错误
5)错误信息打印
一开始一直不执行success回调函数,自己也没打印错误信息,一直找不到原因在哪里。经过断点各种方式,发现ajax是异步请求,成功失败都会跳过去,断点不会直接进入success函数;所以最后将错误信息打印出来。用ajax一定记得打印错误信息。
success: function (data) {
console.log(data)
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
// 状态码
console.log(XMLHttpRequest.status);
// 状态
console.log(XMLHttpRequest.readyState);
// 错误信息
console.log(textStatus);
}
});
6)请求异常 jQuery提示parsererror错误
解决办法:
- 出现这个错误是因为后端返回的数据类型和前端请求中dataType的要求类型不一致导致的。
- 将dataType=“jason”注释掉就可了,原因是我的返回值是一个字符串而不是一个对象。
https://www.cnblogs.com/lizhen-home/p/7472865.html
7)SSM框架使用ajax出现Http状态码406(Not Acceptable)错误
<mvc:annotation-driven>
<mvc:message-converters register-defaults="true">
<!-- 避免IE执行AJAX时,返回JSON出现下载文件 -->
<bean id="fastJsonHttpMessageConverter" class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>application/json;charset=UTF-8</value>
</list>
</property>
</bean>
</mvc:message-converters>
</mvc:annotation-driven>
是代替之前的<mvc:annotation-driven/>
,而不是都加上去,也就是说:
智能增加<bean >…</bean>
,而<mvc:annotation-driven>
只能有一个。
8) Ajax前后端数据交互
https://blog.csdn.net/qq_36202776/article/details/79654938
前端传到后端主要就是靠ajax的格式,注意传送时的数据格式,再后端即直接用@RequestBody接受数据:
@RequestMapping(value = "/get/submit")
@ResponseBody
public JSONObject Submit(@RequestBody Submit ID)
{
System.out.println("前端传送过来的数据"+ID);
}
这个打印出来的ID就是前端传送过来的数据。
后端获取数据:
List<XXX> II= XXXService.list();
System.out.println("数据库的数据"+II.toString());
通过该函数的return即可以返回前端;在前端的里处理后端返回的数据。
success: function (data) {
alert(data)
},
这里还有一个需要注意的地方,在@RequestMapping里最好注释一下使用的是Post方法还是get方法;不备注就是两个都可以;然而在传送参数的过程中不同方式接受参数的方式不一样:
- POST方法用@ResponseBody
- GET方法用@RequestParam
https://blog.csdn.net/bxj19890514/article/details/83861349
9)传值的各种方式
https://blog.csdn.net/qq_34888129/article/details/82696171
10)后端传过来对的数据在前端显示[object Object]解决方法
var json= JSON.stringify(data);
alert(json);
https://blog.csdn.net/a_cherry_blossoms/article/details/87914329
如果后台传送不是json格式:
可以改为datatype:“text”,然后为object是因为没有将其属性打印出来:
for(var i = 0; i < data.length; i++){
console.log("id数据:"+data[i].id); //这里打印一下看看你要取的属性值
}
11)Json格式数据需要注意的地方
https://www.cnblogs.com/jpfss/p/9547004.html
在jquery的ajax中,如果没加contentType:“application/json”,那么data就应该对应的是json对象,反之,如果加了contentType:“application/json”,那么ajax发送的就必须是字符串(需要用JSON.stringify转换)
前台ajax多加了contentType:“application/json”,data却错传成json对象(不行,后台收到的数据将为null,需要将contentType去掉)
ajax中没加contentType:“application/json”,data却直接使用了json字符串(也不行,要加上)
PS:后台如果要返回JSONObject格式数据,但是前台收到为空
所以后台想也返回JSONObject格式数据
@RequestMapping(value = "/get/submit")
@ResponseBody
public String Submit(@RequestBody String req)
{
System.out.println(req);
JSONObject jsonObject = new JSONObject();
jsonObject.put("id", "1");
jsonObject.put("SID", "2356256");
return jsonObject.toString();//先转为字符再传回去
}
// JSONObject jsonObject = new JSONObject();
// jsonObject.put("id", "1");
// jsonObject.put("SID", "2356256");
F12看network的包头返回的内容格式是什么:
12)后端传回json数据格式,并在前端处理提取
在后端,如果传回来的数据有多个json格式,则需要用到JSONArray:
JSONArray jsonArray = new JSONArray();
将多个JSONObject加入形成数组:
JSONObject jsonObject1 = new JSONObject();
jsonObject1.put("id", "1");
jsonObject1.put("Number", "2356256");
jsonObject1.put("Flag", "illegalID");
JSONObject jsonObject2 = new JSONObject();
jsonObject2.put("id", "2");
jsonObject2.put("Number", "23456256");
jsonObject2.put("Flag", "legalID");
jsonArray.put(jsonObject1);
jsonArray.put(jsonObject2);
然后后端再将该数组转化为字符类型传到前端,为什么要转为字符前面提过,要不前端接收为空。
return jsonArray.toString();
这样,后端的数据相当处理完了。
到前端:
前端的数据接收下来success: function (data) {}
success中的data接收即为字符类型,记住。
- 首先转化为对应的json格式:
——该格式的数据类型为object
JSON.parse(data)
- 然后,利用for循环将一个一个对象拿出来:
for(var i = 0; i < JSON.parse(data).length; i++)
{
console.log(JSON.parse(data)[i]["id"])
console.log(JSON.parse(data)[i]["Number"])
console.log(JSON.parse(data)[i]["Flag"])
}
在这里注意,取值均为中括号的格式,而非直接用.id;.Flag
;和json格式取值方式:Obj.key
不同;完全不同。
(直接用“点”就绕了好久,以为哪里出了问题)
参照:https://zhidao.baidu.com/question/1802124962786705907.html
//构建一个json对象
var pinpai = {
"0":{"美的":49,"三星":35,"海信":25,"格力":16,"方太":14},
"1":{"美的":49,"三星":35,"海信":25,"格力":16,"方太":14}
};
jiage = pinpai[0]['美的'];
解决问题要懂得简化,一步一步来,确保前面的步骤正确才有可能去调试后面的数据。