Ajax實現異步加載數據

更新時間：2021年11月16日 17:28:03 作者：起名好難呀！

這篇文章主要為大家詳細介紹了Ajax實現異步加載數據，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Ajax實現異步加載數據的具體代碼，供大家參考，具體內容如下

項目結構如下（需要導入一個JQuery的包，配置文件web.xml和springmvc-servlet.xml，不在寫了，不知道的可以看一下我其它的博客，上邊都有）

異步加載數據

首先創(chuàng)建一個實體類

package com.zkw.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data @AllArgsConstructor @NoArgsConstructor
public class User  {
    private String name;
    private int age;
    private String sex;
}

然后創(chuàng)建一個Controller

package com.zkw.controller;

import com.zkw.pojo.User;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

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

@RestController
public class AjaxController {

    @RequestMapping("/a2")
    public List<User> test2(){
        List<User> userList = new ArrayList<User>();
        userList.add(new User("七七",1,"女"));
        userList.add(new User("琪琪",1,"女"));
        userList.add(new User("琦琦",1,"女"));
        return userList;
    }
}

最后創(chuàng)建一個jsp頁面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax異步數據加載</title>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $.post("${pageContext.reques-t.contextPath}/a2",function (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>
        <thead>
            <tr>
                <td>姓名</td>
                <td>年齡</td>
                <td>性別</td>
            </tr>
        </thead>
        <tbody id="content"></tbody>
    </table>
</body>
</html>

結果如下

用戶登錄的異步驗證

先創(chuàng)建一個Controller

package com.zkw.controller;

import com.zkw.pojo.User;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

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

@RestController
public class AjaxController {
    @RequestMapping("/a3")
    public String test3(String username,String pwd){
        String msg ="";
        if (username != null){
            if (username.equals("admin")){
                msg = "ok";
            }else{
                msg = "用戶名不存在";
            }
        }

        if (pwd != null){
            if (pwd.equals("123456")){
                msg = "ok";
            }else{
                msg = "密碼輸入錯誤";
            }
        }

        return msg;
    }
}

然后創(chuàng)建一個jsp頁面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用戶登錄</title>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.js"></script>
    <script>
       function a1() {
            $.post({
                url:"${pageContext.request.contextPath}/a3",
                data:{"username":$("#username").val()},
                success(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(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="username" οnblur="a1()">
        <span id="userInfo"></span>
    </p>

    <p>
        密碼名：<input type="password" id="pwd" οnblur="a2()">
        <span id="pwdInfo"></span>
    </p>

</body>
</html>

結果如下