ajax+json进行数据传输请求（ssm框架）_前后端的数据传递,建议采用json+ajax请求方式

2401_85014148

于 2024-05-16 13:56:10 发布

阅读量268

点赞数 4

分类专栏： 2024年程序员学习文章标签：物联网嵌入式硬件面试

本文链接：https://blog.csdn.net/2401_85014148/article/details/138958917

版权

2024年程序员学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新

需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）

如果你需要这些资料，可以戳这里获取

    <!--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;
    }


![img](https://img-blog.csdnimg.cn/img_convert/555ac9305be9c97e9e8040d121e6bf4b.png)
![img](https://img-blog.csdnimg.cn/img_convert/625a81390fde2418dfc418a32714949b.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新**

**需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）**

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618679757)**

实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新**

**需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）**

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618679757)**

2401_85014148

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
ajax+json进行数据传输请求（ssm框架）_前后端的数据传递,建议采用json+ajax请求方式

a）我们设置的方法为，只要点击“id=b1”的按钮，就会触发这个函数。代码如下（test.jsp，目录在webapp下）代码如下（TestController.java）1.3 controller写法。c）ajax要发送好几个数据。来注解方法，并封装JSON。1.2 前端发送ajax请求。这样，引入后就可以直接使用。
复制链接

扫一扫