Ajax用原生的Javascript编写的话,并不容易,但是Jquery很好地封装了Ajax,相比较原生的js,jquery的ajax更为简单,编写容易。下面就来认识下JQuery下的ajax。
一、JQuery中AJax load()方法
JQuery load()方法的作用是:从服务器加载数据,并返回数据放入到相应被selector绑定的的元素中。
其格式为:
$(selector).load(URL,data,callback);
参数说明
- URL:要请求的数据的URL,可以将JQuery选择器添加到URL参数中
将test.txt中id=”p”的元素内容放入到id=”div”的
div元素中:
$("#div").load("test.txt #p");
- data:是请求时一同发送的数据,类似于原生js中ajax中
xmlhttp.send(data)
,是键值对的形式出现。 - callback:回调函数,就是load完之后执行的函数。(在父函数中作为参数的另一个子函数,当父函数执行完,子函数再执行。这个子函数就是回调函数),其实就是原生js中的
onclick=funciton(){...}
,回调函数的参数有:
responseTxt:回调成功,从服务器端取回到的数据,跟原生中javascript中的一样。
statusTxt:调用的状态显示,类似于onreadystatechange方法显示状态。
xhr:ajax最核心的XMLHttpRequest 对象
function(responseTxt,statusTxt,xhr)
具体的实例
test.txt:
Welcome Jian!
It's is JQuery ajax!
version 1.0
html部分:
<body>
<div id="div"><h2>利用JQuery中的AJax获取test.txt的内容</h2></div>
<button>获得外部内容</button>
</body>
jquery ajax部分(jquery需要加入jquery.js库文件):
<script src="jquery/jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div").load("test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
});
</script>
结果:
二、JQuery Ajax中的get/post方法
1、get方法
一般都是用来向服务器请求资源数据,get方法需要注意的细节有一下几点:
- get方法可能会取到缓存。
具体的介绍我在day01中记录了 - get方法请求有长度的限制
- get方法请求的参数是在URL中发送的,并且以键值对的形式存在。
- get方法在发送敏感信息(比如用户密码等)时,不推荐使用。因为会缓存保存,
/xxx/xxx/xxx.php?username=Jian&password=123;
其语法:
$.get(URL,callback);
简单的实例:
test_get.txt部分:
Welcome Jian!
It's a get method of ajax !
version 1.0
html部分:
<body>
<div id="div"><h2>利用AJax get方法获取test_get.txt的内容</h2></div>
<button>get</button>
</body>
jquery部分:
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("test_get.txt",function(data,status){
$("#div").html("数据:" + data + "<br/>"+"状态:" + status);//将data放入div中
});
});
});
</script>
结果为:
2、post方法
post方法一般用于向向指定的资源提交要处理的数据。与get方法不同,post方法多了data参数,此外也有以下几点细节:
- post方法不会被缓存。
- post方法请求有长度的限制
post在数据量大,且敏感时推荐使用。
其语法为:
$.post(URL,data,callback,type)
简单实例:
test_post.jsp部分:使用jstl标签获取并输出
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<title>ajax_post</title>
</head>
<% //获取post上来的json数据
String username = request.getParameter("name");
String password = request.getParameter("pass");
//setAttribute存入数据
pageContext.setAttribute("username", username);
pageContext.setAttribute("password", password);
%>
<body>
<div>Welcome <c:out value="${username}"/><br/>
你的帐号为:<c:out value="${username}"/><br/>
你的密码为:<c:out value="${password}"/>
</div>
</body>
</html>
html部分:
<div id="div"><h2>利用AJax post方法提交数据并更新获取test_post.jsp的内容</h2></div>
<button>post</button>
jquery部分:
<script src="jquery/jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("test_post.jsp",
//data
{
name:"Lijian",
pass:"123"
},
//callback
function(data,status){
$("#div").html(data);
});
});
});
</script>
结果: