SpringMVC-09-AJAX

最新推荐文章于 2024-09-30 16:38:14 发布

Void_CM

最新推荐文章于 2024-09-30 16:38:14 发布

阅读量81

点赞数

分类专栏： Ajax SpringMVC 文章标签： ajax

本文链接：https://blog.csdn.net/baidu_41656912/article/details/115290445

版权

SpringMVC 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

Ajax

4 篇文章 0 订阅

订阅专栏

SpringMVC-09-AJAX

AJAX(Asynchronous JavaScript and XML):异步的JavaScript和XML

AJAX是一种无需重新加载整个网页的情况下,能够更新部分网页的技术

使得界面交互性更强,用户体验更佳

比如

伪造Ajax

使用 iframe 标签伪造,

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe-Ajax</title>
    <script>
        function go() {
            var url = document.getElementById("url").value;
            document.getElementById("iframe01").src=url;
        }
    </script>
</head>
<body>
    <div>
        <p>请输入地址:</p>
        <p> <input type="text" id="url"> <input type="button" value="提交" onclick="go()"></p>
    </div>
    <div>
        <iframe id="iframe01" frameborder="1px" style="width: 100%;height: 500px"></iframe>
    </div>
</body>
</html>

演示

GIF

重点,在于没有页面的重定向和跳转

实现AJAX

原生ajax

var xhr = new XMLHttpRequest();//创建XHR对象
xhr.open("get","/data");//规定请求类型和路径
xhr.send();//发送请求
xhr.onreadystatechange = function(){//监听readyState事件
    /*
                0：请求未初始化
                1：服务器连接已建立
                2：请求已接受
                3：请求处理中
                4：请求已经完成
                */
    if(xhr.readyState === 4&& xhr.status ===200){
        $("#change").html(xhr.responseText)
    }
}

jQuery.ajax

重要的参数

url：请求地址

type：请求方式，GET、POST（1.9.0之后用method）

data：要发送的数据

success：成功之后执行的回调函数(全局)

error：失败之后执行的回调函数(全局)

结构

$.ajax({
        url:"../...",
    	type:
        data:{key:value},
        success:(dataFromBackEnd,status)=>{}
      });

实例1-简单字符串传送

GIF

index.jsp

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

  </head>
  <body>
  <p> 输入:<input type="text" id="in" οninput="a()"></p>
  <p> 输出:<input type="text" id="out"></p>
  <script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script>
  <script>
    function a(){
      $.ajax({
        url:"${pageContext.request.contextPath}/in",
        data:{"indata":$("#in").val()},
        success:(dataFromBackEnd,status)=>{
          $("#out").val(dataFromBackEnd+status);
        }
      });
    }
  </script>
  </body>
</html>

后端

@RequestMapping("/in")
public String inTOOUt(String indata){
    System.out.println("intoout:"+indata);
    return indata;
}

实例2-前后端数据交互

GIF

testAjax.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            $("#btn").click(()=>{
                // console.log("hello!");
                $.ajax({
                    url:"${pageContext.request.contextPath}/t2",
                    success:(data)=>{
                        var html = "";
                        for (let i =0;i<data.length;i++){
                            html+="<tr>"
                                + "<td>"+data[i].id+"</td>"
                                + "<td>"+data[i].name+"</td>"
                                + "<td>"+data[i].age+"<td>"
                                +"<tr>"
                        }
                        $("#content").html(html);
                    }
                })
            })
        })
    </script>
</head>
<body>
<div class="container">
    <input type="button" value="获取数据" class="btn btn-primary" id="btn">
    <table class="table table-hover">
        <thead>
        <tr>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        </thead>
        <tbody id="content">

        </tbody>
    </table>
</div>


</body>
</html>

后端

@RequestMapping("/t2")
public List<User> test2(){
    List<User> users = new ArrayList<User>();
    users.add(new User(1,"void",18));
    users.add(new User(2,"cmy",20));

    return users;
}

实例3-表单登录验证

GIF

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
            function a1() {
                $.ajax({
                    url:"${pageContext.request.contextPath}/t3",
                    data:{"name":$("#username").val()},
                    success:(data)=>{
                        if (data!="ok"){
                            $("#userInfo").removeClass("glyphicon glyphicon-ok")
                            $("#userInfo").addClass("glyphicon glyphicon-remove")
                            $("#UserHelpInfo").css("color","red");
                            $("#UserHelpInfo").html("用户名不符合规范");

                        }else {
                            $("#userInfo").removeClass("glyphicon glyphicon-remove")
                            $("#userInfo").addClass("glyphicon glyphicon-ok")
                            $("#UserHelpInfo").css("color","green");
                            $("#UserHelpInfo").html("用户名符合规范");
                        }
                    }
                })
            }
            
            function a2() {
                $.ajax({
                    url:"${pageContext.request.contextPath}/t3",
                    data:{"pwd":$("#password").val()},
                    success:(data)=>{
                        if (data!="ok"){
                            $("#pwdInfo").removeClass("glyphicon glyphicon-ok")
                            $("#pwdInfo").addClass("glyphicon glyphicon-remove")
                            $("#pwdHelpInfo").css("color","red");
                            $("#pwdHelpInfo").html("密码输入不规范")
                        }else {
                            $("#pwdInfo").removeClass("glyphicon glyphicon-remove")
                            $("#pwdInfo").addClass("glyphicon glyphicon-ok")
                            $("#pwdHelpInfo").css("color","green");
                            $("#pwdHelpInfo").html("密码输入符合要求")
                        }

                    }
                })
            }

    </script>
</head>
<body>
    <div class="container">
        <from class="form-horizontal float-left">
            <div class="form-group">
                <label for="username" class=" col-md-2 control-label">用户名:</label>
                <div class="input-group col-md-5">
                    <input type="text" id="username" class="form-control" aria-describedby="userInfo" οnblur="a1()">
                    <span id="userInfo" class="input-group-addon"></span>
                </div>
                <span id="UserHelpInfo" class="col-md-offset-2"> </span>
            </div>

            <div class="form-group">
                <label for="password" class="control-label col-md-2">密码:</label>
                <div class="input-group col-md-5">
                    <input type="password" id="password" class="form-control" aria-describedby="pwdInfo" οnblur="a2()">
                    <span id="pwdInfo" class="input-group-addon"></span>
                </div>
                <span id="pwdHelpInfo" class="col-md-offset-2"> </span>
            </div>
        </from>
    </div>

</body>
</html>

后端

@RequestMapping("/t3")
public String test3(String name,String pwd){
    String msg = "";
    if (name!=null){
        if ("admin".equals(name)){
            msg="ok";
        }else {
            msg="failed";
        }
    }
    if (pwd!=null){
        if ("123456".equals(pwd)){
            msg="ok";
        }else {
            msg="failed";
        }
    }
    return msg;
}