ajax+json进行数据传输请求（ssm框架）

最新推荐文章于 2024-03-20 23:49:01 发布

匆匆四月

最新推荐文章于 2024-03-20 23:49:01 发布

阅读量1.7w

点赞数 12

分类专栏： js方面 ssm

本文链接：https://blog.csdn.net/zyf2333/article/details/78075192

版权

ssm 同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

js方面

3 篇文章 0 订阅

订阅专栏

之前跟着视频学习时候就了解到，ajax是可以不刷新整个页面情况下，进行数据交换和更新。学习完后，为了加深理解，特地重新研究了下ajax和JSON之间的交互。

注意，要使用ajax，需要先引用jquery！

1.1、在pom引入json和jackson的jar包

    <!--json-->
    <dependency>
      <groupId>net.sf.json-lib</groupId>
      <artifactId>json-lib</artifactId>
      <version>2.4</version>
      <classifier>jdk15</classifier>
    </dependency>

    <!-- jackson -->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.8.8.1</version>
    </dependency>

这样，引入后就可以直接使用@ResponseBody 来注解方法，并封装JSON

1.2 前端发送ajax请求
代码如下（test.jsp，目录在webapp下）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
用户名：<input type="text" name="name"><br>
密码：<input type="text" name="pw"><br>
<input type="button" id="b1" value="提交"><br>
</body>
<script>
    $(function () {
        $("#b1").click(function () {
            $.ajax({
                url: "/zyf/test",        //后台url
                data: {                          //数据
                    name:$("input[name='name']").val(),
                    pw:$("input[name='pw']").val()
                },
                type: "POST",                   //类型，POST或者GET
                dataType: 'json',              //数据返回类型，可以是xml、json等
                success: function (data) {      //成功，回调函数
                    alert(data.result);
                },
                error: function (er) {          //失败，回调函数
                    alert(er);
                }
            });
        })

    })
</script>
</html>

ajax解释说明：
a）我们设置的方法为，只要点击“id=b1”的按钮，就会触发这个函数
b）注意引用jquery！
c）ajax要发送好几个数据。

url：发送的请求地址（类似于action），后台controller用@RequestMapping的value属性接受请求
type：请求方式（如post，get，delete等），controller的method属性与之对应一样
dataType：数据返回的类型，可以是xml，json等，我们这里声明清楚是json类型。
data：要传进去的数据，格式为key:value ，controller里可以在方法的参数里，使用@RequestParam("value") 来获取这个数
success：成功返回数据后要执行的操作，此处我们是弹出结果。里面的data（自定义名字，你取名aaa都行）即对应着controller里的return XXX的XXX 。（后面再详讲）

1.3 controller写法
代码如下（TestController.java）

package com.atguigu.LearnTest.controller;

import net.sf.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class TestController {

    @RequestMapping(value = "/zyf/test", method = RequestMethod.POST)
    @ResponseBody
    public JSONObject CeShi(@RequestParam("pw") String pw, @RequestParam("name") String name) {
        JSONObject jsonObject = new JSONObject();
        if ("".equals(pw) && "".equals(name))
            jsonObject.put("result", "用户名和密码都为空！");
        else if ("".equals(name))
            jsonObject.put("result", "用户名为空！");
        else if ("".equals(pw))
            jsonObject.put("result", "密码为空！");
        else
            jsonObject.put("result", name);
        return jsonObject;
    }
}

解释说明：

该方法使用了两个注解，这里我们只简介下@ResponseBody：它可以自动将该函数的返回的数据封装成json模式，然后传给前端内容（就目前阶段而说，想要用json的话，直接在方法上添加@ResponseBody总是没错的）
这里使用了JSONObject类型。其实简单来说，这个就是个特殊的“Map”。不同的是，JSONObject的键值写法为key:value、map中是key=value 。所以这里不用纠结很多，把它当Map看就好了
@RequestParam将获取到的值传递给参数
jsonObject.put即添加键值对
返回JSONObject，即对应着ajax的data。然后返回看jsp部分，就可以知道，我们将要alert弹出data.name（即jsonObject.name）
-

1.4、运行及效果图
这里写图片描述

1.5 Controller其他写法
controller的类型不仅仅限制于Map JSONObject这些。还可以是String等等，比如我做如下修改，将JSONObject改为String类型，然后直接返回一个String类型的ce

    @RequestMapping(value = "/zyf/test", method = RequestMethod.POST)
    @ResponseBody
    public String CeShi(@RequestParam("pw") String pw, @RequestParam("name") String name) {
        String ce="123456";
        return ce;
    }

前端的ajax把success的部分修改下：

...前面内容略
success: function (data) {      //成功，回调函数
                    alert(data);
                },
...后面内容略

就会弹出如下效果：（这也正好验证了，data参数（随便取名）对应着controller中return的对象（即，data=ce））
这里写图片描述

匆匆四月

关注

12
点赞
踩
71

收藏

觉得还不错? 一键收藏
4
评论
ajax+json进行数据传输请求（ssm框架）

之前跟着视频学习时候就了解到，ajax是可以不刷新整个页面情况下，进行数据交换和更新。学习完后，为了加深理解，特地重新研究了下ajax和JSON之间的交互。注意，要使用ajax，需要先引用jquery！1.1、在pom引入json和jackson的jar包  <dependency> <groupId>net.sf.json-lib</groupId>
复制链接

扫一扫