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 实例

https://www.iteye.com/blog/jun1986-1399242
https://www.cnblogs.com/yeer/archive/2009/07/23/1529460.html

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)错误

原因所在
解决方法
在springMVC.xml文件中加入：

<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]['美的'];

解决问题要懂得简化，一步一步来，确保前面的步骤正确才有可能去调试后面的数据。

Yolandalt7777777

发布了28 篇原创文章 · 获赞 4 · 访问量 8722

私信关注

利用Ajax进行前端和后端互传数据