ajax原理剖析

最新推荐文章于 2022-05-10 10:48:10 发布

蓝朋友丶

最新推荐文章于 2022-05-10 10:48:10 发布

阅读量116

点赞数 1

分类专栏： SpringMVC 文章标签： ajax js java

本文链接：https://blog.csdn.net/qq_45697630/article/details/115862072

版权

SpringMVC 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

ajax是一种在无需重新加载整个网页的情况下，能更新部分网页的技术。（例：在网页的搜索栏输入需求信息后，下面马上会弹出来相关的信息列表，但是此时并没有刷新当前页面）
ajax使用javascript在浏览器与服务器之间进行数据的发送和接收。通过在后台与服务器交换数据，而不是每当用户做出改变是重新加载整个Web页面，从而使网页更迅速地响应用户的操作。

示例代码（只展示核心代码）：

log.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
    //这是我的jquery文件在当前项目的位置，根据位置写即可
    <script>
        function a() {
            $.post({
                url:"${pageContext.request.contextPath}/t6",
                data:{"name":$("#name").val()},
            success:function (data) {
                    if(data.toString()==="ok"){
                        $("#nm").css("color","green")
                    }else{
                        $("#nm").css("color","red")
                    }
                    $("#nm").html(data);
            }
            })
        }
        function b() {
            $.post({
                url:"${pageContext.request.contextPath}/t6",
                data:{"pwd":$("#pwd").val()},
            success:function (data) {
                    if(data.toString()==="ok"){
                        $("#pd").css("color","green")
                    }else{
                        $("#pd").css("color","red")
                    }
                    $("#pd").html(data);
            }
            })
        }
    </script>
</head>
<body>
<p>
    用户名:<input type="text" id="name" οnblur="a()">
    <span id="nm"></span>
</p>
<p>
    密码:<input type="text" id="pwd" οnblur="b()">
    <span id="pd"></span>
</p>

</body>
</html>

AjaxController.java

package com.hui.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
//还可以通过@Controller和@ResponseBody联合使用达到只返回JSON字符串的目的
@RestController //此注释规定，被标注的所有字符串只返回一个JSON字符串，不会走视图解析器。
public class AjaxController {

    
    @RequestMapping("/t6")
    public String test6(String name,String pwd){
        String msg="";
        if(name!=null){
            if("li".equals(name)){
                msg="ok";
            }else{
                msg="用户名错误";
            }
        }
        if(pwd!=null){
            if("123".equals(pwd)){
                msg="ok";
            }else{
                msg="密码错误";
            }
        }
        return msg;
    }
}