SpringBoot项目，实现前后台json数据交互，及涉及知识点

最新推荐文章于 2023-05-30 22:51:09 发布

不忘初心fight

最新推荐文章于 2023-05-30 22:51:09 发布

阅读量3k

点赞数 3

分类专栏： java html jquery

本文链接：https://blog.csdn.net/weixin_41831919/article/details/100716553

版权

java 同时被 3 个专栏收录

30 篇文章 1 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

jquery

3 篇文章 1 订阅

订阅专栏

前台代码

<!DOCTYPE html>
<html lang="en">
<script src="http://how2j.cn/study/jquery.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        #register{
            text-align: center;
        }
    </style>
</head>
<body>
<form id="register">
    <h1>用户注册</h1>
    <input type="text" name="name" value="" placeholder="用户名" id="user">
    <br>
    <input type="password" name="passwd" value="" placeholder="用户密码" id="passwd" >
    <br>
    <button>提交</button>
    <div id="checkResult"></div>
</form>
<script>
    $(function(){
        $("button").click(function () {
            var url = "register";

            var name = $("#user").val();
            var passwd = $("#passwd").val();
            var json = {"name": name, "passwd": passwd}
            $.ajax({
                url: url,
                type: "POST",
                data: JSON.stringify(json),
                dataType: "json",
                async: false,
                contentType: 'application/json;charset=utf-8',
                success: function (result) {
                    var newData = JSON.stringify(result);    //将json对象转换为字符串
                    newData = eval("(" + newData + ")");   //解析json
                    alert("消息:" + newData.msg);
                },
                error: function () {
                    alert("提交请求失败！");
                }
            });

        });
    });

</script>

</body>
</html>

前端代码知识点：

placeholder="用户名"  用户提示

var name = $("#user").val();  获取用户输入的信息

url: url,
type: "POST",
data: JSON.stringify(json),
dataType: "json",
async: false,
contentType: 'application/json;charset=utf-8'   传参时注意点

var newData = JSON.stringify(result);    //将json对象转换为字符串
newData = eval("(" + newData + ")");   //解析json

后台代码

package com.abang.cart.web;

import cn.hutool.json.JSONObject;
import com.abang.cart.bean.User;
import com.abang.cart.dao.UserDao;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import static org.springframework.web.bind.annotation.RequestMethod.POST;

@Controller
public class Register {
    @Autowired
    User user;
    @Autowired
    UserDao userDao;
    //接受用户注册请求
    @RequestMapping(value = "/register", method = POST)
    public void register(@RequestBody JSONObject json,HttpServletResponse response) throws IOException {
        System.out.println(json.toString());
        String name = (String) json.get("name");
        String passwd = (String) json.get("passwd");
        System.out.println("name:" + name+","+"passwd:"+passwd);
        JSONObject object = new JSONObject();  //创建Json对象
        response.setCharacterEncoding("UTF-8");
        //用户名及密码如果为空
        if (name == null || passwd == null || ("").equals(name) || ("").equals(passwd)) {
            object.put("msg", "用户名或密码不能为空！！！");   //设置Json对象的属性
            System.out.println(object.toString());
            response.getWriter().write(String.valueOf(object));
            //用户名及密码如果不为空
        } else {
            String dataPasswd = userDao.getUserName(name);
            System.out.println("dataUser："+dataPasswd);
            //查不到该用户
            if (dataPasswd == null) {
                user.setName(name);
                user.setPasswd(passwd);
                userDao.insertUser(user);
                object.put("msg", "注册成功！！！");
                response.getWriter().write(String.valueOf(object));
            } else {
                object.put("msg", "注册的用户已存在！！！");
                response.getWriter().write(String.valueOf(object));
            }
        }
    }

}

后端代码知识点：

@RequestMapping(value = "/register", method = POST)

@RequestBody JSONObject json     前端传来的为json字符串

String name = (String) json.get("name");   //通过参数属性，获取参数值

JSONObject object = new JSONObject();  //创建Json对象
response.setCharacterEncoding("UTF-8");     //设置返回时字符集，防止出现乱码

object.put("msg", "用户名或密码不能为空！！！");   //设置Json对象的属性
response.getWriter().write(String.valueOf(object));   //将后台json字符串信息传给前台

不忘初心fight

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录