jQuery使用ajax提交post数据

最新推荐文章于 2025-04-02 20:23:37 发布

船长ζ

最新推荐文章于 2025-04-02 20:23:37 发布

阅读量1.7w

点赞数 6

分类专栏：随记整理一点点

本文链接：https://blog.csdn.net/zyjtoto/article/details/102470235

版权

随记同时被 2 个专栏收录

44 篇文章

订阅专栏

整理一点点

39 篇文章

订阅专栏

本文深入探讨了使用AJAX进行JSON数据交换的多种方法，包括详细的固定写法和简化写法，通过实例展示了如何从输入框获取数据并发送到服务器，同时分析了一个常见失败案例及其解决策略，强调了变量作用域的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

固定写法：

$(document).ready(function () {
# 自己编写的json格式数据
 var schoolList={
  "pageCount": "2",
  "pageIndex": "1",
  "sign": "1",
  "uniPayId": "9dc1308bab2b4b49987a0c12dd7339f5"
}
 $.ajax({
        type:"POST",
        url:"/schoolroll/insert",
        contentType: "application/json", //必须这样写
        dataType:"json",
        data:JSON.stringify(schoolList),//schoolList是你要提交是json字符串
        success:function (data) {
 
        }
 
    })
})

简版写法；

$("input").keyup(function(){
	# 获取输入框的值
  txt=$("input").val();
  $.post("demo_ajax_gethint.asp",{suggest:txt},function(result){
    $("span").html(result);
  });
});

失败案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加</title>
    <script type="text/javascript" src="assert/js/jquery-3.4.1.min.js"></script>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript">
        var uname = $('#username').val();
        var upwd =$('#pwd').val();
        function test() {
            console.log(uname + "----" + upwd); # 打印出来的数据是未定义 undefined----undefined 很奇怪
          $.ajax({
              type:'post',
              url:'user/add',
              data:JSON.stringify({
                  "name":uname,
                  "email":upwd
              }),
              contentType: "application/json",
              success: function (data) {
                alert(data.message)
              }
          })
        }
    </script>
</head>
<body>
<div>
    <p>请输入注册信息</p>
    用户名：<input class="" type="text" id="username"><br/>
    邮  箱：<input type="text" id="pwd">
    <input class="btn btn-sm btn-danger" type="button" value="提交" onclick="test()">

</div>
</body>
</html>

不知到为什么？

原因:错误出现的原因是我的变量读取的时机错误了，变量应该声名在函数里面：

 <script type="text/javascript">

        function test() {
            var uname = $('#username').val();
            var upwd =$('#pwd').val();
            console.log(uname + "----" + upwd);
          $.ajax({
              type:'post',
              url:'user/add',
              data:JSON.stringify({
                  "name":uname,
                  "email":upwd
              }),
              contentType: "application/json",
              success: function (data) {
                alert(data.message)
              }
          })
        }
    </script>

如果变量声明在外面，他读取出来的值就是还没有输入内容的时候读取的。肯定是没有定义的了。因为是空的！还是对前端不熟。这是个低级错误。

附上前端代码

@Controller
@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    UserService userService;

    @RequestMapping(value = "/add", method = RequestMethod.POST)
    public Map<String, String> addUser(@RequestBody User user) {
        Map<String, String> map = new HashMap<>();
        final String s = userService.addUser(user);
        map.put("message", s);
        return map;
    }
}

@Service
public class UserService {

    @Autowired
    UserMapper userMapper;

    public String addUser(User user) {
        if (StringUtils.isEmpty(user.getName())) {
            return "用户名不能为空";
        }
        if (StringUtils.isEmpty(user.getEmail())) {
            return "用户密码不能为空";
        }
        final int i = userMapper.addUser(user);
        if (i>0) {
            return "添加成功";
        }
        return "添加失败";
    }
}