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的基本使用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!