SpringMVC学习笔记总结【七】-- ajax-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42190209/article/details/123296415

文章目录

简介

AJAX = Asynchronous JavaScript and XML(异步的JavaScript和XML)。
AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
在2005年，Google通过其Google Suggest使 AJAX变得流行起来。Google Suggest能够自动帮你完成搜索单词。
Google Suggest使用 AJAX创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。
传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页。
使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。
使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

JQuery.ajax

我们真接使用jquery提供的，方便学习和使用，避免重复造轮子，有兴趣的可以去了解下JS原生XMLHttpRequest !
Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。
jQuery提供多个与AJAX有关的方法。
通过jQuery AJAX方法，您能够使用HTTP Get和HTTP Post 从远程服务器上请求文本、HTML、XML或JSON–同时您能够把这些外部数据直接载入网页的被选元素中。
jQuery不是生产者，而是大自然搬运工。
jQuery Ajax本质就是XMLHttpRequest，对他进行了封装，方便调用!

示例1 -异步加载数据

   @RequestMapping("/a2")
    public List<User> a2(){
        List<User> userList = new ArrayList<User>();

        userList.add(new User("kaka1",1,"man"));
        userList.add(new User("kaka2",2,"man"));
        userList.add(new User("kaka3",3,"man"));

        return userList;
    }

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $.post("${pageContext.request.contextPath}/a2",function (data) {
                    //console.log(data);
                    var html = "";

                    for (let 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" value="加载" id="btn">
<table>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tbody id="content">

    </tbody>
</table>

</body>
</html>

示例2-用户登录验证

@RequestMapping("/a3")
    public String a3(String name, String pwd) {
        String msg = "";
        if (name != null) {
            //admin应该从数据库中取得
            if ("admiin".equals(name)) {
                msg = "ok";
            } else {
                msg = "fail";
            }
        }
        if (pwd != null) {
            //admin应该从数据库中取得
            if ("123456".equals(pwd)) {
                msg = "ok";
            } else {
                msg = "fail";
            }
        }

        return msg;
    }

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">
    </script>

    <script>
        function a1() {
            $.post({
                url: "${pageContext.request.contextPath}/a3",
                data: {"name":$("#name").val()},
                success:function (data) {
                    if (data.toString() == "ok"){
                        $("#userInfo").css("color","green");
                    }else{
                        $("#userInfo").css("color","red");
                    }
                    $("#userInfo").html(data);
                }
            })
        }
        function a2() {
            $.post({
                url: "${pageContext.request.contextPath}/a3",
                data: {"pwd":$("#pwd").val()},
                success:function (data) {
                    if (data.toString() == "ok"){
                        $("#pwdInfo").css("color","green");
                    }else{
                        $("#pwdInfo").css("color","red");
                    }
                    $("#pwdInfo").html(data);
                }
            })
        }
    </script>
</head>
<body>
<p>
    用户名：<input type="text" id="name" onblur="a1()">
    <span id="userInfo"></span>
</p>
<p>
    密码：<input type="text" id="pwd" onblur="a2()">
    <span id="pwdInfo"></span>
</p>

</body>
</html>