SpringMVC知识小汇（5）——Ajax

最新推荐文章于 2024-04-20 11:30:35 发布

木鱼非鸟

最新推荐文章于 2024-04-20 11:30:35 发布

阅读量112

点赞数

分类专栏： SSM

本文链接：https://blog.csdn.net/weixin_45734378/article/details/114726693

版权

SSM 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

文章目录

- Ajax

Ajax

@RequestBody将后台的对象转换成json形式显示在页面上

@RequestBody是接收前端json形式的数据，将json自动封装到破解哦中，此注解是通过获取请求体中的数据，因此要提高POST方法，GET方法只能通过@getParameter接收

Ajax是一种用于创建更好更快以及交互性更强的web应用程序技术，默认是Get请求

Ajax的核心是XMLHttpRequest对象（XHR）。XHR为服务器发送请求和解析服务器响应提供了接口。能够以异步的方式从服务区中获取数据。

JQuery Ajax本质就是XMLHttpRequest，对他进行封装，方便调用

JQuery.ajac(…)

部分参数：

url：请求地址

data：要发送的数据

success：成功之后的回调函数（全局）

“jsonp”：JSONP格式使用JSONP形式调用函数时，如"myurl?callback=?"jQuery将自动替换?为正确的函数名，以执行回调函数

实现Ajax异步交互

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>Ajax</title>
  </head>
  <body>
<%--  伪造Ajax,实现异步交互--%>

  <script type="text/javascript">
    window.onload = function t() {
      let date = new Date();
      document.getElementById('timeShow').innerText = date.getTime();
    }

    function f() {
      let va = document.getElementById('uri').value;
      document.getElementById('inner').src = va;<!--调用src属性-->
    }
  </script>

   <div>
     <p>查看时间：<span id="timeShow"></span></p>

     <input type="text" id="uri" value="https://www.baidu.com/">
     <input type="submit" value="提交" οnclick="f()"></input>
     <h4>此处加载页面</h4>
     <iframe id="inner" style="width: 100%; height: 500px"><!--iframe有个src属性，用来显示连接到的对象-->
     </iframe>
   </div>
  </body>
</html>

index2.jsp

<%--
  Created by IntelliJ IDEA.
  User: dell
  Date: 2021/3/11
  Time: 17:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax</title>
    <%--    先引入jquery--%>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js"></script>
</head>
<body>
用户名：<input type="text" id="txtName" οnblur="a()">

<script type="application/javascript">
    function a() {
        // 用jQuery调用Ajax
        $.get({
            url: "${pageContext.request.contextPath}/ajax/a1",
            data: {"name": $("#txtName").val()},//jQuery中的val()主要用于处理表单元素的值   此处的name对应后端接收的参数名
            success: function (data, status) {//发送的值和状态
                console.log(data);
                console.log(status)
            }
        });
    }

</script>

</body>
</html>

index3.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: dell
  Date: 2021/3/11
  Time: 19:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js"></script>
</head>
<body>
<input type="submit" id="btn" value="获取">
<table>
    <thead>
    <tr>
        <th>id</th>
        <th>姓名</th>
        <th>年纪</th>
    </tr>
    </thead>
    <tbody id="content">
    </tbody>
</table>

<script type="application/javascript">
    // jquery其实就是将js简化了，可以直接通过其自定义的方法获取对应的标签，但是js要通过各种方法(getElementById)
    // ajax是一种异步请求的方法技术，在函数内调用
    $("#btn").click(function () {
        $.post("${pageContext.request.contextPath}/ajax/a2", function (data) {
            console.log(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>
</body>
</html>

index4.jsp

<%--
  Created by IntelliJ IDEA.
  User: dell
  Date: 2021/3/11
  Time: 20:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>


    <script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js"></script>

</head>
<body>

<p>
    用户名：<input type="text" id="nameId" οnblur="u1()">
    <span id="nameInfo"></span>
</p>
<p>
    密码：<input type="text" id="pwd" οnblur="p1()">
    <span id="pwdInfo"></span>
</p>


<script type="application/javascript">
    function u1() {
        // 要传的参数（对应）    从表单中获取的值
        $.post("${pageContext.request.contextPath}/ajax/a3", {"name": $("#nameId").val()}, function (data) {
            if (data == "ok") {
                $("#nameInfo").css("color", "green");
            }else {
                $("#nameInfo").css("color", "red");
            }
            $("#nameInfo").html(data);
        })
    }

    function p1() {
        $.post("${pageContext.request.contextPath}/ajax/a3", {"pwd": $("#pwd").val()}, function (data) {
            if (data == "ok") {
                $("#pwdInfo").css("color", "green");
            }else {
                $("#pwdInfo").css("color", "red");
            }
            $("#pwdInfo").html(data);
        })
    }
</script>
</body>
</html>

AjaxController

package com.wjq.controller;

import com.wjq.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

/**
 * @author wjq
 * @create 2021-03-11 17:57
 */
@Controller
@RequestMapping("/ajax")
public class AjaxController {
    @RequestMapping("/a1")
    public void aj1(String name, HttpServletResponse response) throws IOException {
        if ("admin".equals(name)) {
            response.getWriter().print("yes");
        }else {
            response.getWriter().print("error");
        }
    }

    @RequestMapping("/a2")
    @ResponseBody
    public List<User> aj2() {

        List<User> list = new ArrayList<User>();
        User user1 = new User(1, "大头1", 20);
        User user2 = new User(2, "大头2", 20);

        list.add(user1);
        list.add(user2);

        return list;
    }

    @RequestMapping("/a3")
    @ResponseBody
    public String aj3(String name, String pwd) {
        String msg = "";
        if (name != null) {
            if ("wjq".equals(name)) {
                msg = "ok";
            }else {
                msg = "userName is error!";
            }
        }
        if (pwd != null) {
            if ("12345".equals(pwd)) {
                msg = "ok";
            }else {
                msg = "password is error!";
            }
        }
        return msg;
    }
}