Ajax的使用

闰土我是猹！

于 2022-12-08 18:28:48 发布

阅读量262

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_56177676/article/details/128241660

版权

SSM 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Ajax

AJAX = Asynchronous JavaScript and XML （异步的JavaScript和XML）。
AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
在2005年，Google通过其Google Suggest使AJAX变得流行起来。Google Suggest能够自动帮你完成搜索单词。
Google Suggest使用AJAX创造出动态性极强的web界面:当您在谷歌的搜索框输入关键字

时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。

就和国内百度的搜索框一样

1、iframe的方式进行异步加载

iframe 语法

 <iframe id="win" src="超链接" style="width: 600px;height: 600px;"></iframe>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe</title>
    <script>
        function go() {
            //拿到 输入的 内容
            var value = document.getElementById("url").value
            //赋给 iframe的 src
            document.getElementById("win").src = value
        }
    </script>
</head>
<body>
<div>
    <p>请输入地址:</p>
    <p>
        <input type="text" id="url">
        <input type="button" value="提交" onclick="go()">
    </p>
</div>
<div>
    <iframe id="win" style="width: 600px;height: 600px;"></iframe>
</div>
</body>
</html>

在这里插入图片描述

2、失去焦点发送Ajax请求

在这里插入图片描述

Controller

@RestController
public class AjaxController {
    @PostMapping("/b1")
    public void blur(String name, HttpServletResponse response) throws IOException {
        System.out.println("参数是:"+name);
        if (name.equals("lmh")){
            //返回给data
            response.getWriter().println("参数是lmh");
        }else {
            response.getWriter().println("参数不是lmh");
        }
    }
}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
         http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
  <!--DispatcherServlet-->
  <servlet>
    <servlet-name>DispatcherServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <!--一定要注意:我们这里加载的是总的配置文件，之前被这里坑了！-->
      <param-value>classpath:springmvc-servlet.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>DispatcherServlet</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

  <!--encodingFilter-->
  <!--配置编码过滤器-->
  <filter>
    <filter-name>CharacterEncodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
    <init-param>
      <param-name>forceResponseEncoding</param-name>
      <param-value>true</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>CharacterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
</web-app>

JSP

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        function b() {
            $.post({
                url: "${pageContext.request.contextPath}/b1",
                //键值对形式
                data: {'name': $("#username").val()},
                success: function (data,status) {
                    alert(data);
                    alert(status);
                }
            })
        }
    </script>
</head>
<body>

<%--    失去焦点的时候，发送一个请求到后台 --%>
用户名:<input type="text" id="username" οnblur="b()"/>
</body>
</html>

在这里插入图片描述

3、Ajax异步加载数据

在这里插入图片描述
controller

@RestController
public class UserController {
    @RequestMapping("/a2")
    public List<User> a2() {
        List<User> list = new ArrayList<>();
        list.add(new User("lmh", 18, "男"));
        list.add(new User("lmh2", 11, "女"));
        list.add(new User("lmh3", 12, "男"));
        return list;
    }
}

pojo

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

jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                $.ajax({
                    url: "${pageContext.request.contextPath}/a2",
                    success(data) {
                        var html1 = ""
                        for (let i = 0; i < data.length; i++) {
                            html1 += "<tr>"
                                + "<td>" + data[i].name + "</td>"
                                + "<td>" + data[i].age + "</td>"
                                + "<td>" + data[i].sex + "</td>"
                                + "</tr>"
                        }
                        $("#tb").html(html1)
                    }
                })
            })
        })
    </script>
</head>
<body>
<input type="button" value="加载数据" id="btn">
<table>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tbody id="tb">
    </tbody>
</table>
</body>
</html>

在这里插入图片描述

4、Ajax验证用户名

比如注册功能中，输入一个用户名，我们不需要提交，失去焦点就会无刷新显示该用户名已被注册。

controller

@RestController
public class UserController {

    @RequestMapping("/login")
    public String login(String name, String passwd) {
        String msg = "";
        //!name.equals("")  防止 什么都不输入的时候 判错
        if (name != null && !name.equals("")) {
            if (name.equals("lmh")) {
                msg = "用户名正确！";
            } else {
                msg = "用户名错误！";
            }
        }

        if (passwd != null && !passwd.equals("")) {
            if (passwd.equals("123123")) {
                msg = "密码正确！";
            } else {
                msg = "密码错误！";
            }
        }
        //由于@RestController注解，自动转成json格式返回
        return msg;
    }
}

jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            //判断用户名
            $("#name").blur(function () {
                $.ajax({
                    url: "${pageContext.request.contextPath}/login",
                    data: {"name": $("#name").val()},
                    success(data) {
                        $("#userInfo").html(data)
                        if (data.toString() === "用户名正确！") {
                            $("#userInfo").css("color", "green")
                        } else {
                            $("#userInfo").css("color", "red")
                        }
                    }
                })
            })
            //判断密码
            $("#passwd").blur(function () {
                $.ajax({
                    url: "${pageContext.request.contextPath}/login",
                    data: {"passwd": $("#passwd").val()},
                    success(data) {
                        $("#passwdInfo").html(data)
                        if (data.toString() === "密码正确！") {
                            $("#passwdInfo").css("color", "green")
                        } else {
                            $("#passwdInfo").css("color", "red")
                        }
                    }
                })
            })
        })
    </script>
</head>
<body>
<p>用户名：<input type="text" id="name"><span id="userInfo"></span>
</p>
<p>密码：<input type="password" id="passwd"><span id="passwdInfo"></span>
</p>
</body>
</html>

在这里插入图片描述

闰土我是猹！

关注

1
点赞
踩
0

收藏

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

AJAX = Asynchronous JavaScript and XML （异步的JavaScript和XML）。AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。在2005年，Google通过其Google Suggest使AJAX变得流行起来。Google Suggest能够自动帮你完成搜索单词。
复制链接

扫一扫