SpringMVC (三) --- AJAX

最新推荐文章于 2021-08-05 13:35:37 发布

树叶过河 Z

最新推荐文章于 2021-08-05 13:35:37 发布

阅读量179

点赞数 1

分类专栏： SpringMVC 文章标签： AJAX

本文链接：https://blog.csdn.net/weixin_44823057/article/details/98236233

版权

SpringMVC 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一，AJAX 简介

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX 不是新的编程语言，而是一种使用现有标准的新方法
AJAX 最大的优点是在不重新加载整个页面的情况下，能与服务器交换数据并更新部分网页内容
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行

二，用前端标签伪造一个AJAX

传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页，
但是使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。
我们可以使用前端的一个标签来伪造一个ajax的样子； iframe标签。
【要求：在不刷新网页的情况下加载出百度】

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Shandx</title>
</head>
<body>

<script type="text/javascript">

    function LoadPage(){
        var targetUrl =  document.getElementById('url').value;
        console.log(targetUrl);
        document.getElementById("iframePosition").src = targetUrl;
    }

</script>

<div>

    <p>
        <h3>请输入要加载的地址：</h3>
        <input id="url" type="text" value="https://www.baidu.com/"/>
        <input type="button" value="提交" onclick="LoadPage()">
    </p>

</div>

<div>
    <h3>加载页面位置：</h3>
    <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
</div>

</body>
</html>

【运行结果】
在这里插入图片描述

三，jQuery.Ajax

Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据
jQuery 提供多个与 AJAX 有关的方法，通过 jQuery AJAX 方法，我们能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON；同时我们能够把这些外部数据直接载入网页的被选元素中
jQuery 不是生产者，而是大自然搬运工；jQuery Ajax本质就是 XMLHttpRequest

四，测试

【使用jQuery时我们要先导入jQuery的jar包】
下载地址：https://mvnrepository.com/artifact/org.webjars.bower/jquery/3.4.1
在这里插入图片描述

1，使用最原始的HttpServletResponse处理

编写一个Ajax Controller

@Controller
@RequestMapping("/ajax")
public class AjaxController {

    @RequestMapping("/a1")
    public void ajax1(String name , HttpServletResponse response) throws IOException {
        if ("admin".equals(name)){
            response.getWriter().print("true");
        }else{
            response.getWriter().print("false");
        }
    }

}

编写index.jsp测试

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
    <title>ajax</title>
    
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.js"></script>
    <script>
   
  /* jQuery.post(...)   所有参数：
              url: 待载入页面的URL地址 (必填)
             data: 待发送 Key/value 参数
          success: 载入成功时回调函数
            data:请求返回的数据
            status：请求返回的状态*/
         
        function a1(){
            $.post({
                url:"${pageContext.request.contextPath}/ajax/a1",
                data:{'name':$("#txtName").val()},
                success:function (data,status) {
                    console.log(data);
                    console.log(status);
                }
            });
        }

    </script>
</head>
<body>

<%--onblur：失去焦点触发事件--%>
用户名:<input type="text" id="txtName" onblur="a1()"/>

</body>

运行结果
在这里插入图片描述

2，SpringMVC实现

编写一个Controller

    @RequestMapping("/a2")
    @ResponseBody
    public List<User> ajax2(){
        List<User> list = new ArrayList<User>();
        list.add(new User("钢铁侠",1,"男"));
        list.add(new User("蜘蛛侠",2,"男"));
        list.add(new User("闪电侠",3,"男"));
        return list;   //由于@ResponseBody注解，将list转成json格式返回
    }

编写index2.jsp测试

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>

<input type="button" id="btn" value="获取数据"/>
<table width="80%" align="center">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tbody id="content">
    </tbody>
</table>

<script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.js"></script>

<script>
    $(function () {
        $("#btn").click(function () {
            $.post("${pageContext.request.contextPath}/ajax/a2",function (data) {
                console.log(data);
                var html = "";
                for (var 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>

</body>
</html>

运行结果
在这里插入图片描述

3，注册提示

编写一个Controller

   @RequestMapping("/a3")
    @ResponseBody
    public String ajax3(String name,String pwd){

        String msg = "";
        //模拟数据库中存在数据
        if (name!=null){
            if ("admin".equals(name)){
                msg = "OK";
            }else {
                msg = "用户名输入错误";
            }
        }
        if (pwd!=null){
            if ("123456".equals(pwd)){
                msg = "OK";
            }else {
                msg = "密码输入有误";
            }
        }
        return msg; //由于@ResponseBody注解，将list转成json格式返回
    }

编写index3.jsp测试

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.min.js"></script>
    <script>

        function a1() {
            $.post({
                url: "${pageContext.request.contextPath}/ajax/a3",
                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}/ajax/a3",
                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" onblur="a1()"/>
    <span id="userInfo"></span>
</p>
<p>
    密码:<input type="text" id="pwd" onblur="a2()"/>
    <span id="pwdInfo"></span>
</p>
</body>
</html>

运行结果
在这里插入图片描述

树叶过河 Z

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SpringMVC (三) --- AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行...
复制链接

扫一扫