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 相关文章推荐
Z-Blog中用到的js代码
Mar 15 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
小程序实现上下移动切换位置
Sep 23 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 26 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将数据导入到Foxmail
2006/10/09 PHP
PHP循环获取GET和POST值的代码
2008/04/09 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
div层的移动及性能优化
2010/11/16 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
2017/01/05 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
Python线程指南详细介绍
2017/01/05 Python
python自动裁剪图像代码分享
2017/11/25 Python
TensorFlow高效读取数据的方法示例
2018/02/06 Python
Python sorted排序方法如何实现
2020/03/31 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
日语专业毕业生自荐信
2013/11/11 职场文书
社区安全检查制度
2014/02/03 职场文书
物理专业大学生职业生涯规划书
2014/02/07 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
JS实现简单九宫格抽奖
2022/06/28 Javascript
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS
Python实现数据的序列化操作详解
2022/07/07 Python