SMVC6：Ajax的简单使用

最新推荐文章于 2024-09-05 15:06:14 发布

云杉先生和他的鹿

最新推荐文章于 2024-09-05 15:06:14 发布

阅读量96

点赞数

分类专栏： SpringMVC 文章标签： ajax jquery

本文链接：https://blog.csdn.net/qq_44700366/article/details/120713241

版权

SpringMVC 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了如何使用jQuery库结合Ajax技术实现页面的异步数据交互，包括搜索建议的实时显示、表格数据的动态加载以及用户名和密码的后台验证。通过示例代码展示了AjaxController.java和相关jsp页面的实现细节，展示了前端与后端的交互流程。

摘要由CSDN通过智能技术生成

6.1 概述

简介

所谓ajax其实就是，异步无刷新。即不刷新网页，实现局部数据更新。具体应用呢，比如使用搜索引擎时，数据一个字，即可出现很多候选项，这就是使用的ajax。而jQuery只是一个库，拥有大量的方法，通过这个文件，我们即可使用ajax。

参数

url:地址
data:数据
success：请求成功
error：请求失败

6.3 例子

index.jsp:

<%--
  Created by IntelliJ IDEA.
  User: yun
  Date: 2021/10/11
  Time: 10:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>首页</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
    <script>
      function a(){
        $.post({
          url:"${pageContext.request.contextPath}/a1",
          data:{"name":$("#username").val()},
          success:function (data){
            alert(data)
        }
        })
      }

    </script>
  </head>
  <body>
用户名：<input type="text" id="username" οnblur="a()">


  </body>
</html>

AjaxController.java:

package com.yun.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@RestController
public class AjaxController {

    @RequestMapping("/a1")
    public void a1(String name, HttpServletResponse response) throws IOException {
        System.out.println("你好啊"+name);
        response.getWriter().print("则是返回数据");   
    }
}

6.3 使用

AjaxController.java:

package com.yun.controller;

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

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

@RestController
public class AjaxController {


    @RequestMapping("/t1")
    public List<User> test2(){
        List<User> userList = new ArrayList<User>();

        userList.add(new User("张三",23,"男"));
        userList.add(new User("张二",22,"女"));
        userList.add(new User("张一",21,"男"));

        return userList;
    }
}

table.jsp:

<%--
  Created by IntelliJ IDEA.
  User: yun
  Date: 2021/10/11
  Time: 14:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>数据展示</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
    <script>
        $(function (){
            $("#btn").click(function (){
                $.post("${pageContext.request.contextPath}/t1",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>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tbody id="content">

    </tbody>
</table>

</body>
</html>

6.4 同户名判断

AjaxController.java:

package com.yun.controller;

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

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

@RestController
public class AjaxController {
   @RequestMapping("/login")
    public String User(String name,String pwd){
        String msg = "";
        if (name!=null){
            if ("admin".equals(name)){
                msg= "ok";
            }else {
                msg = "用户不存在";
            }
        }
        if (pwd!=null){
            if ("1234".equals(pwd)){
                msg="ok";
            }else {
                msg="密码错误";
            }
        }
        return msg;
    }
}

login.jsp:

<%--
  Created by IntelliJ IDEA.
  User: yun
  Date: 2021/10/11
  Time: 15:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录</title>
    <script src="statics/js/jquery-3.6.0.js"></script>
    <script>
        function a1(){
            $.post({
                url:"${pageContext.request.contextPath}/login",
                data:{"name":$("#name").val()},
                success:function (data){
                    if (data.toString()==='ok'){
                        $("#userInfo").css("color","green");
                    }else {
                        $("#userInfo").css("color","red");
                    }
                    $("#userInfo").html(data);
                }
            })
        }
        function a2(){
            $.post({
                url:"${pageContext.request.contextPath}/login",
                data:{"pwd":$("#pwd").val()},
                success:function (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="name" οnblur="a1()">
    <span id="userInfo"></span>
</p>
<p>
    密   码:<input type="password" id="pwd" οnblur="a2()">
    <span id="pwdInfo"></span>
</p>
</body>
</html>

10月，薄衣敌不过寒风。

云杉先生和他的鹿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SMVC6：Ajax的简单使用

6.1 概述简介所谓ajax其实就是，异步无刷新。即不刷新网页，实现局部数据更新。具体应用呢，比如使用搜索引擎时，数据一个字，即可出现很多候选项，这就是使用的ajax。而jQuery只是一个库，拥有大量的方法，通过这个文件，我们即可使用ajax。参数url:地址data:数据success：请求成功error：请求失败6.3 例子index.jsp:<%-- Created by IntelliJ IDEA. User: yun Date: 2021/10
复制链接

扫一扫

专栏目录