SpringMVC------Ajax

最新推荐文章于 2022-05-09 13:24:15 发布

java—explore

最新推荐文章于 2022-05-09 13:24:15 发布

阅读量174

点赞数 3

分类专栏： SpringMVC 前端文章标签： Ajax SPringmvc

本文链接：https://blog.csdn.net/weixin_44821177/article/details/98465253

版权

前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

SpringMVC

4 篇文章 0 订阅

订阅专栏

AJAX= Asychronous JavaScript and XML（异步的JavaScript和 xml）。

AJAX 是一直那个在无需重新加载真个网页的情况下，能够更新部分网页的技术。

Ajax 不是一种新语言，而是一直那个用于创建更好的更快的以及交互性更强的web应用程序技术。

在2005 年，Google 通过Google Suggest 使AJAX 变得流行起来。

Google Suggest 使用 AJAX创造出动态性极强的web页面：
当你在谷歌的搜索框输入关键字时，JavaScrip 会把这些字符送到服务器，然后服务去会返回一个搜索建议的列表。
就像百度的搜索框一样：
在这里插入图片描述
传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页。
使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。

利用AJAX可以做：

注册时，输入用户名自动检测用户是否已经存在。
登陆时，提示用户名密码错误
删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。

我们可以使用前端的一个标签来伪造一个ajax的样子。 iframe标签

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
    <title>ajax</title>
    <script src="${pageContext.request.contextPath}/statics/jsp/jquery-3.4.1.js"></script>
    <script>

        /*
       jQuery.post(...)
       所有参数：
              url: 待载入页面的URL地址 (必填)
             data: 待发送 Key/value 参数
          success: 载入成功时回调函数
            data:请求返回的数据
            status：请求返回的状态
         */
        function a1(){
            //ajax默认是get请求
            $.post({
                url:"${pageContext.request.contextPath}/ajax/a1",
                data:{'name':$("#txtName").val()},
                success:function (data,status) {
                    console.log(data);
                    console.log(status);
                }
            });
        }

    </script>
</head>
<body>
<%--onblur：失去焦点触发事件--%>
用户名:<input type="text" id="txtName" onblur="a1()"/>
</body>

然后编写我们的 contorller：

package com.wu.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Controller
@RequestMapping("/ajax")
public class AjaxController {
    //第一种方式，服务器要返回一个字符串，直接使用response
    @RequestMapping("/a1")
    public void ajax(String name, HttpServletResponse response) throws IOException {
        if ("admin".equals(name)){
            response.getWriter().print("true");
        }else {
            response.getWriter().print("false");
        }
    }
}

运行结果：
在这里插入图片描述
点击输入框，当鼠标点击输入框以外的地方时就会触发事件：显示 false success

在原有的基础上升级：

@RequestMapping("/a3")
    @ResponseBody
    public String ajax3(String name,String pwd){
        String msg = "";
        if (name!=null){
            if ("admin".equals(name)){
                msg = "ok";
            }else {
                msg = "用户名有误";
            }
        }
        if (pwd!=null){
            if ("123456".equals(pwd)){
                msg = "ok";
            }else {
                msg = "密码输入有误";
            }
        }
        return msg;
    }

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/statics/jsp/jquery-3.4.1.js"></script>

    <script>
        function a1() {
            $.post({
                url:"${pageContext.request.contextPath}/ajax/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("${pageContext.request.contextPath}/ajax/a3",{"pwd":$("#pwd").val()},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>

运行结果“：”
在这里插入图片描述
输入正确的用户名和密码：

nice大功告成动态请求响应局部刷新就是如此。。。