Ajax学习总结

最新推荐文章于 2022-12-04 14:56:07 发布

acm er

最新推荐文章于 2022-12-04 14:56:07 发布

阅读量1.8k

点赞数 3

分类专栏： javaweb springmvc 文章标签： ajax

本文链接：https://blog.csdn.net/weixin_43323647/article/details/108888872

版权

javaweb 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

springmvc

7 篇文章 0 订阅

订阅专栏

首先Ajax简介：全称Asynchronous JavaScript and XML,即异步的JavaScript和XML。他不是一门编程语言，而是利用JavaScript在保证页面不被刷新，页面链接不被改变的情况下雨服务器交换数据并且更新网页的技术。
之后介绍JQuery的一些简单使用，一些Ajax的内置函数：
这里我拿一个列子来进行分析：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script>
    <script>
        function a1() {
            $.post({
                url:"${pageContext.request.contextPath}/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}/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>
    <title>登录界面</title>
</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>

对上面这段代码进行详细分析理解Ajax请求：
1.直接看上面的俩个函数function() a1和a2 内部的$符代表js的标志，首先是提交post请求，然后是各种参数包括url,data,success…当然这三个是最重要的。
1)url:这个代表提交之后的访问地址
2)data:代表一个键值对，提交到后台的数据其实我个人理解就是隐藏起来的url类似于这种localhost:8080/hello/a3?key=value这种的提交到请求域里面，这样后台就可以根据name获取到对应的value值，进而执行controller中的方法，将参数赋值给对应的参数。
3).第三个参数就是success就是执行成功的返回值，然后将response的数据赋值给data数据域，data代表的是请求提交的数据域，当response的时候同样的也将后台提交的数据返回给data也是key-value数据域，然后写入html中提交前端界面，通过id.html()方法写入data，进而在前端页面显示。

acm er

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax学习总结

首先Ajax简介：全称Asynchronous JavaScript and XML,即异步的JavaScript和XML。他不是一门编程语言，而是利用JavaScript在保证页面不被刷新，页面链接不被改变的情况下雨服务器交换数据并且更新网页的技术。之后介绍JQuery的一些简单使用，一些Ajax的内置函数：这里我拿一个列子来进行分析：<%@ page contentType="text/html;charset=UTF-8" language="java" %><html&g
复制链接

扫一扫