脚本宝典收集整理的这篇文章主要介绍了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) |
使用步骤:
<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的基本使用全部内容,希望文章能够帮你解决Ajax的基本使用所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。