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

3 篇文章 0 订阅
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字符串信息传给前台
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值