Ajax的基本使用
2021/11/5 6:09:43
本文主要是介绍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的基本使用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求
- 2024-10-01使用 golang 将ETH账户的资产平均分散到其他账户
- 2024-10-01JWT用户校验课程:从入门到实践
- 2024-10-01Server Component课程入门指南
- 2024-09-30Dnd-Kit学习:新手快速入门指南