2010.01.08——jquery Ajax之$().load,$.get(),$.post()
2010.01.08——jquery Ajax之$().load,$.get(),$.post()
1.先看一下传统的ajax
ajax old.html
ajax old2.jsp
2.$().load(),注意 load是jquery对象的方法
ajax_load().html
ajax_load()2.html
3.$.get()方法 是jquery的全局函数
ajax_get().html
ajax_get()2.jsp
注意：返回的json数据，所以text/html，要改为text/json
1.先看一下传统的ajax
ajax old.html
<!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">
<title>Insert title here</title>
<script type="text/javascript">
var xhr = null;
function ajax(){
if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}else if (window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}
xhr.open("GET","ajax old2.jsp",true);
xhr.onreadystatechange = RequestCallBack;
xhr.send(null);
}
function RequestCallBack(){
if(xhr.readyState==4){
if(xhr.status==200){
document.getElementById("show").innerHTML = xhr.responseText;
}
}
}
</script>
</head>
<body>
<input type="button" value="ajax" onclick="ajax()"/>
<div id="show"></div>
</body>
</html>
ajax old2.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<% out.print("Hello Ajax"); %>
</body>
</html>
2.$().load(),注意 load是jquery对象的方法
ajax_load().html
<!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">
<title>Insert title here</title>
<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function(){
$('#bn').click(function(){
/*
*load()方法通常从web服务器上获得静态的数据文件
*load(url,data,callback)
*url 要载入的远程html的地址，可以url selector，用选择器来过滤
*data 发送到服务器的数据
*callback 请求完成后的回调函数，无论成功或者失败，一共有三个参数
*responseText 请求返回的内容
*textStatus 请求状态，有success,error,notmodified,timeout四种
*XMLHttpRequest 很明显了
*/
$('#show').load('ajax_load()2.html .css2',function(responseText,textStatus,XMLHttpRequest){
alert($(this).html());//this指当前获得的dom对象(不包括"何宜杰"了，因为他不是.css2)
alert(responseText);//这个是ajax_load()2.html的内容
alert(textStatus);//success
alert(XMLHttpRequest);//对象
});
});
});
</script>
</head>
<body>
咱们班最傻的人是？
<hr>
<input id="bn" type="button" value="获取答案" />
<div id="show"></div>
</body>
</html>
ajax_load()2.html
<!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"> <title>Insert title here</title> </head> <body> <div class="css1"> 何宜杰 </div> <div class="css2"> 韦香良 </div> <div class="css2"> 贾阳阳 </div> </body> </html>
3.$.get()方法 是jquery的全局函数
ajax_get().html
<!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">
<title>Insert title here</title>
<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script type="text/javascript">
/*
* $.get()和$.post()都是jQuery的全局函数
* $.get()方法使用GET方式来进行异步请求
* $.get(url,data,callback,type);
* url:是请求的url地址
* data:发送到服务器的参数，会以QueryString的形式加在url后面
* callback:载入成功时调用的函数，只有在Request的返回状态为success时才调用
* 有两个参数，data,返回的内容，
* textStatus,请求状态，success,error,notmodified,timeout，只有为success时，才会调用callback
* type:是服务器返回内容的格式，有xml.html.script,json,text和_default
*/
$(function(){
$('#send').click(function(){
$.get('ajax_get()2.jsp',{
username: $('#username').val(),
content: $('#content').val()
},function(data,textStatus){
//alert(data);
//alert(textStatus);
var username = data.username;
var content = data.content;
var textHtml = "<div><h6>"+username+" 说:</h6><p>"+content+"</p></div>";
$("#show").html(textHtml);
},"json");
})
});
/*html类型的
$(function(){
$('#send').click(function(){
$.get('ajax_get()2.jsp',{
username: $('#username').val(),
content: $('#content').val()
},function(data,textStatus){
alert(data);
alert(textStatus);
$('#show').html(data);
});
})
});
*/
</script>
</head>
<body>
<form action="#" method="get">
<p>评论：</p>
<p>姓名：<input type="text" name="username" id="username" /></p>
<p>内容：<textarea rows="2" cols="15" name="context" id="content"></textarea></p>
<input type="button" value="提交" id="send">
</form>
<div id="show"></div>
</body>
</html>
ajax_get()2.jsp
注意：返回的json数据，所以text/html，要改为text/json
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String username = request.getParameter("username");
String content = request.getParameter("content");
out.println("{ username : '"+username+"' , content : '"+content+"'}");
%>