Java教程

Ajax的基本使用

本文主要是介绍Ajax的基本使用，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Ajax

Ajax即Asynchronous Javascript And XML（异步JavaScript和 XML）。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

ajax的作用：

  • 可以不刷新页面更新网页中的数据
  • 页面加载后从服务器请求数据
  • 页面加载后从服务器接受数据
  • 在后台向服务器发送数据

在Jquery下使用Ajax，$.ajax()方法的详解：

方法 具体作用
url 要求为String类型的参数，（默认为当前页地址）发送请求的地址。
type 要求为String类型的参数，请求方式（post或get）默认为get。
dataType 要求为String类型的参数，预期服务器返回的数据类型。
data 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。（可以省略不写）
success 要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。function(data, textStatus)

使用步骤：

  • 需要导入jQuery文件：
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

  • 在前端页面中具体使用ajax：

    第一种方式：

    function a2() {
        $.post({		//使用post方法提交
            url: "后端定义的servlet链接",
            data: {"后端数据名称":$("#前端数据(id)").val()},
            success:function (data) {
                //----获取请求成功后调用函数----
            }
        })
    }

第二种方式：

$.post( "ajax/test.html", function( data ) {
  $( ".result" ).html( data );
});

小demo：

@RequestMapping("/a3")
@ResponseBody
public String  ajaxT3(String username, String password){
    String msg = "";
    if (username != null){
        if ("vxzx".equals(username)){
            msg = "成功";
        }else {
            msg = "失败";
        }
    }

    if (password != null){
        if ("123456".equals(password)){
            msg = "成功";
        }else {
            msg = "失败";
        }
    }
    return msg;
}

<script src="${pageContext.request.contextPath}/statics/jquery-3.6.0.js"></script>
<script>
    function a1() {
        $.post({
            url:"${pageContext.request.contextPath}/a3",
            data:{"username":$("#name").val()},
            success:function (data) {
                if (data.toString() === "成功"){
                    $("#content").css("color","green");
                }else {
                    $("#content").css("color","red");
                }
                $("#content").html(data)
            }
        })
    };
    //data 必须传值过去，不然获取不到值；
    function a2() {
        $.post({
            url: "${pageContext.request.contextPath}/a3",
            data: {"password":$("#pwd").val()},
            success:function (data) {
                if (data.toString() === "成功"){
                    $("#content2").css("color","green");
                } else {
                    $("#content2").css("color","red");
                }
                $("#content2").html(data)
            }
        })
    }
</script>

<body>
    用户名：<input type="text" id="name" onblur="a1()">  <span id="content"></span>
    <br>
    密码  ：<input type="password" id="pwd" onblur="a2()" > <span id="content2"></span>
</body>
这篇关于Ajax的基本使用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航