load()方法通常用来从Web服务器上获取静态的数据文件。
在项目中,如果要传递参数给服务器中的页面,那么可以使用$.get()或$.post(),$.ajax()。
注意:$.get()和$.post()是jQuery中的全局函数,而在此之前讲的jQuery方法都是对jQuery对象进行操作的。
$.get()方法使用GET方式来进行异步请求。其结构为:
$.get(url [, data] [, callback] [,type])
$.get()方法参数解释
参数名称 | 类型 | 说明 |
url | String | 请求HTML页的URL地址 |
data(可选) | Object | 发送至服务器的key/value数据会作为QueryString附加到请求URL中 |
callback(可选) | Function | 载入成功时回调函数(只有当Response的返回状态是success才调用该方法)自动将请求结果和状态传递给该方法 |
type(可选) | String | 服务器端返回内容的格式,包括xml,html,script,json,text和_default |
$(function(){
$("#send").click(function(){
$.get("get1.jsp", {
username : encodeURI( $("#username").val() ) ,
content : encodeURI( $("#content").val() )
}, function (data, textStatus){
$("#resText").html(decodeURI(data)); // 把返回的数据添加到页面上
});
})
})
$.get()方法的回调函数只有两个参数,代码如下:
function(data, textStatus){
// data:请求返回的内容,可以是XML文档、JSON文件、HTML片段等
//textStatus:请求状态:success,error,notmodified,timeout 4种
}
注意: 回调函数只有当数据成功返回(success)后才被调用,这点与load()方法不一样。
数据格式
HTML片段:
XML文档:
注意:由于期待服务器端返回的数据格式是XML文档,因此需要在服务器端设置Content-Type类型,代码如下:
response.setContentType("text/xml");
JSON文件:
get3.jsp文件的内容:
<%@ 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+"'}");
%>
get3.html文件:
<script type="text/javascript">
$(function(){
$("#send").click(function(){
$.get("get3.jsp", {
username : encodeURI($("#username").val()),
content : encodeURI($("#content").val())
}, function (data, textStatus){
var username=data.username;
var content=data.content;
username=decodeURI(username);
content=decodeURI(content);
var txtHtml="<div class='comment'><h6>"+username+":</h6><p class='para'>"+
content+"</p></div>";
$("#resText").html(txtHtml);
},"json"); //”json”代表期待服务器端返回的数据格式
})
})
</script>
学习总结:
在不需要与其它应用程序共享数据时,使用HTML片段来提供返回数据最简单;
如果数据需要重用,那么JSON文件是不错的选择,它在性能和文件大小方面具有优势;
而当远程应用程序未知时,XML文档时明智的选择,它是WEB服务领域的”世界语”。