Ajax实现异步加载数据

2024-04-02 19:04:59 795人浏览泡泡鱼

摘要

本文实例为大家分享了ajax实现异步加载数据的具体代码，供大家参考，具体内容如下项目结构如下（需要导入一个Jquery的包，配置文件WEB.xml和springMVC-servl

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

项目结构如下（需要导入一个Jquery的包，配置文件WEB.xml和springMVC-servlet.xml，不在写了，不知道的可以看一下我其它的博客，上边都有）

异步加载数据

首先创建一个实体类


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>

结果如下

用户登录的异步验证

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

结果如下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Ajax实现异步加载数据

本文链接: https://www.lsjlt.com/news/157456.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Ajax实现异步加载数据

本文实例为大家分享了Ajax实现异步加载数据的具体代码，供大家参考，具体内容如下项目结构如下（需要导入一个JQuery的包，配置文件web.xml和springmvc-servl...

99+

2022-11-12
Ajax如何实现异步加载

小编给大家分享一下Ajax如何实现异步加载，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！AJAX （Asynchronous J...

99+

2022-10-19
vue.js表格分页及ajax异步加载数据怎么实现

这篇“vue.js表格分页及ajax异步加载数据怎么实现”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue.js表格分页及...

99+

2023-07-04
winform异步加载数据怎么实现

在WinForm中实现异步加载数据可以使用BackgroundWorker组件或者使用Task类来实现。方法一：使用Backgrou...

99+

2023-10-10

winform
ajax如何异步加载图片

这篇文章主要为大家展示了“ajax如何异步加载图片”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“ajax如何异步加载图片”这篇文章吧。具体如下：图片一般比较大，...

99+

2022-10-19
ajax如何实现加载数据功能

这篇文章将为大家详细讲解有关ajax如何实现加载数据功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。具体内容如下xssj.php<script src="jquery-3.2....

99+

2023-06-08
Ajax如何实现动态加载数据

这篇文章给大家分享的是有关Ajax如何实现动态加载数据的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。这个随笔实现了一个Ajax动态加载的例子。使用.net 的MVC框架实现。这个例子重点在前后台交互，其它略写。开...

99+

2023-06-08
ajax中怎么通过异步加载实现局部刷新

这篇文章给大家介绍ajax中怎么通过异步加载实现局部刷新，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。[html] view plain copy <sc...

99+

2022-10-19
如何使用DataTable插件实现异步加载数据

这篇文章主要介绍如何使用DataTable插件实现异步加载数据，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！table部分代码<table class="t...

99+

2022-10-19
ECharts异步加载数据与数据集（dataset）

目录异步加载数据数据的动态更新数据集（dataset）数据到图形的映射视觉通道（颜色、尺寸等）的映射交互联动异步加载数据 ECharts 通常数据设置在 setOption 中，如果...

99+

2022-11-13
vue ElementUI实现异步加载树

本文实例为大家分享了vue ElementUI实现异步加载树的具体代码，供大家参考，具体内容如下路由文件修改 import List from '@/components/li...

99+

2022-11-12
Android实现异步加载图片

麦洛开通博客以来,有一段时间没有更新博文了.主要是麦洛这段时间因项目开发实在太忙了.今天周六还在公司加班,苦逼程序猿都是这样生活的.今天在做项目的时候,有一个实现异步加载图片的功能,虽然比较简单但还是记录一下吧.因为麦洛之前实现异步加载图片...

99+

2023-05-31

android 异步加载 roi
webpack2中怎么实现异步加载

本篇文章为大家展示了webpack2中怎么实现异步加载，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。webpack提供的一个非常强大的功能就是code spliti...

99+

2022-10-19
ECharts异步加载数据与数据集的方法

本文小编为大家详细介绍“ECharts异步加载数据与数据集的方法”，内容详细，步骤清晰，细节处理妥当，希望这篇“ECharts异步加载数据与数据集的方法”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。异步加载数据E...

99+

2023-07-02
Go 语言中如何实现异步数据加载和数组操作？

在 Go 语言中，异步数据加载和数组操作是非常常见的需求。本文将介绍如何在 Go 语言中实现异步数据加载和数组操作，以及如何优化代码以提高性能。异步数据加载在 Go 语言中，异步数据加载通常使用协程（Goroutine）来实现。协程是一...

99+

2023-09-26

数组 load 异步编程
Go 语言异步编程：如何实现高效的数据加载？

随着互联网技术的发展，数据处理已经成为了一个重要的话题。在实际开发中，我们经常需要从外部系统或数据库中获取数据，并将其加载到我们的应用程序中。在这种情况下，异步编程成为了一种非常重要的方式，它可以提高我们的应用程序的性能和响应速度。本文将...

99+

2023-09-26

数组 load 异步编程
vue3之Suspense加载异步数据的使用

Suspense使用 <template> <Suspense> <template #default> <Prod...

99+

2023-02-05

vue3 Suspense加载异步 vue3 Suspense 异步
Ajax怎么实现点击不断加载数据列表

这篇文章主要介绍“Ajax怎么实现点击不断加载数据列表”，在日常操作中，相信很多人在Ajax怎么实现点击不断加载数据列表问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Ajax...

99+

2022-10-19
vue实现加载页面自动触发函数(及异步获取数据)

目录加载页面自动触发函数实例页面加载时,触发某个函数的方法解决方法如下加载页面自动触发函数实例 methods:{ onCreate:async function() ...

99+

2022-11-13
详解JavaScript实现异步Ajax

目录一、什么是 AJAX ？1、AJAX是基于现有的Internet标准2、AJAX 工作原理二、AJAX - 创建 XMLHttpRequest 对象1、XMLHttpReques...

99+

2022-11-13