Ajax实现异步加载数据


Posted in Javascript onNovember 17, 2021

本文实例为大家分享了Ajax实现异步加载数据的具体代码,供大家参考,具体内容如下

项目结构如下 (需要导入一个JQuery的包,配置文件web.xml和springmvc-servlet.xml,不在写了,不知道的可以看一下我其它的博客,上边都有)

Ajax实现异步加载数据

异步加载数据

首先创建一个实体类

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;
}

然后创建一个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;
    }
}

最后创建一个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>

结果如下

Ajax实现异步加载数据

用户登录的异步验证

先创建一个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;
    }
}

然后创建一个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>

结果如下

Ajax实现异步加载数据

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
理解Javascript_03_javascript全局观
Oct 11 Javascript
一个简单的JavaScript数据缓存系统实现代码
Oct 24 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
JavaScript反射与依赖注入实例详解
May 29 Javascript
JavaScript显式数据类型转换详解
Mar 18 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 Javascript
关于AngularJS中几种Providers的区别总结
May 17 Javascript
浅谈JavaScript中的“!!”作用
Aug 03 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 Javascript
36个正则表达式(开发效率提高80%)
Nov 17 #Javascript
Javascript 解构赋值详情
Nov 17 #Javascript
javascript Number 与 Math对象的介绍
Nov 17 #Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 #Javascript
JavaScript 对象创建的3种方法
Nov 17 #Javascript
JavaScript 中for/of,for/in 的详细介绍
Nov 17 #Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 #Javascript
You might like
php Undefined index和Undefined variable的解决方法
2008/03/27 PHP
计算一段日期内的周末天数的php代码(星期六,星期日总和)
2009/11/12 PHP
php生成随机密码的三种方法小结
2010/09/04 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
用Python遍历C盘dll文件的方法
2015/05/06 Python
对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解
2018/06/28 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
python 实现两个npy档案合并
2020/07/01 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
精选干货:Java精选笔试题附答案
2014/01/18 面试题
最受欢迎的自我评价
2013/12/22 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers