2021-02-23 springmvc_ajax_json(绑定数据；验证表单)

最新推荐文章于 2022-10-01 08:53:55 发布

我已经漏气了

最新推荐文章于 2022-10-01 08:53:55 发布

阅读量69

点赞数

文章标签： ajax jsonp jquery

本文链接：https://blog.csdn.net/ipangci/article/details/113993984

版权

这里写目录标题

Ajax总结：

Ajax总结：

AJAX 是什么？

AJAX = Asynchronous JavaScript and XML.
AJAX 是一种用于创建快速动态网页的技术。
AJAX 通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个页面。

1.编写对应的Controller,返回消息或者字符串或者json格式的数据；

@Controller
public class AjaxController {
    @RequestMapping("ajax1")
    public void ajax1(String name, HttpServletResponse response) throws IOException {
        if("admin".equals(name)){
            response.getWriter().print("true");
        }else {
            response.getWriter().print("false");
        }
    }
    @RequestMapping("ajax2")
    @ResponseBody
    public List<User> ajax2(){
        List<User> list = new ArrayList<>();
        User user1 = new User("zs",23,"男");
        User user2 = new User("ls",24,"女");
        User user3 = new User("ww",25,"女");
        User user4 = new User("zl",26,"男");
        list.add(user1);
        list.add(user2);
        list.add(user3);
        list.add(user4);
        return list;
    }
    @RequestMapping("login")
    @ResponseBody
    public String login(String name,String pwd){
        String msg = "";
        if(name != null){
            if("admin".equals(name)){
                msg = "ok";
            }else {
                msg = "用户名有误";
            }
        }
        if(pwd != null){
            if("123".equals(pwd)){
                msg = "ok";
            }else {
                msg = "密码有误";
            }
        }
        return msg;
    }
}

2.编写Ajax请求

a.url：待载入页面的URL地址 json
b.data：待发送key/value参数
c.success：载入成功时回调函数(data：封装了服务器返回的数据,status：状态)

3.给Ajax绑定事件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script>
</head>
<body>
<script type="text/javascript">
    function a() {
        $.ajax({
            url:"${pageContext.request.contextPath}/ajax1",
            date:{"name":$("txtname").val()},
            success:function (data,status) {
                console.log(data);
                console.log(status);
            }
        });
    }
</script>
用户名：<input type="text" id="txtname" onblur="a()">
</body>
</html>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#btn").click(function () {
                $.post("${pageContext.request.contextPath}/ajax2",function(data){
                    console.log(data);
                    var html = "";
                    for(var i = 0;i<data.length;i++){
                        html += "<tr>"
                            +"<td>"+ data[i].name +"</td>"
                            +"<td>"+ data[i].age +"</td>"
                            +"<td>"+ data[i].sex +"</td>"
                            +"</tr>"
                    }
                    $("#content").html(html);
                })
            });
        });
    </script>
</head>
<body>
<input type="button" name="" id="btn" value="获取数据"/>
<table style="width: 80%" align="center">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tbody id="content">
    </tbody>
</table>
</body>
</html>

在这里插入图片描述

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>reg</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script>
    <script type="text/javascript">
        function regName() {
            $.ajax({
                url:"${pageContext.request.contextPath}/login",
                data:{"name":$("#name").val()},
                success:function (date) {
                    console.log(date);
                    if(date.toString() == "ok"){
                        $("#nameInfo").css("color","green");
                    }else {
                        $("#nameInfo").css("color","red");
                    }
                    $("#nameInfo").html(date);
                }
            })
        }
        function regPwd() {
            $.post("${pageContext.request.contextPath}/login",{"pwd":$("#pwd").val()},
                function (date) {
                    if(date.toString() == "ok"){
                        $("#pwdInfo").css("color","green");
                    }else {
                        $("#pwdInfo").css("color","red");
                    }
                    $("#pwdInfo").html(date);
                }
            )
        }
    </script>
</head>
<body>
<p>
    用户名<input type="text" id="name" onblur="regName()">
    <span id="nameInfo"></span>
</p>
<p>
    密码<input type="text" id="pwd" onblur="regPwd()">
    <span id="pwdInfo"></span>
</p>
</body>
</html>

在这里插入图片描述

我已经漏气了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-02-23 springmvc_ajax_json(绑定数据；验证表单)

Ajax总结：1.编写对应的Controller,返回消息或者字符串或者json格式的数据；@Controllerpublic class AjaxController { @RequestMapping("ajax1") public void ajax1(String name, HttpServletResponse response) throws IOException { if("admin".equals(name)){ respo
复制链接

扫一扫