参考资料
1 jQuery ajax - load() 方法
[url]http://www.w3school.com.cn/jquery/ajax_load.asp[/url]
[b]load() 方法通过 AJAX 请求从服务器加载数据,并把返回的数据放置到指定的元素中[/b].
[i]url 规定要将请求发送到哪个 URL。
data 可选。规定连同请求发送到服务器的数据。
function(response,status,xhr)
额外的参数:
response - 包含来自请求的结果数据
status - 包含请求的状态("success", "notmodified", "error", "timeout" 或 "parsererror")
xhr - 包含 XMLHttpRequest 对象[/i]
以下所用路径请参见:
JSP:引用文件(绝对路径)[url]http://liuzidong.iteye.com/blog/1198188[/url]
用法一 GET请求
示例代码如下:
JqueryLoadServlet .java
注意事项:使用
用法二 POST请求
以上调用就不会产生乱码!
用法三 使用回调函数
[color=red]总结如下:jQuery的load方法可指定加载静态文件,也可发送ajax请求,它常用于直接获取数据显示在页面中[/color]
1 jQuery ajax - load() 方法
[url]http://www.w3school.com.cn/jquery/ajax_load.asp[/url]
[b]load() 方法通过 AJAX 请求从服务器加载数据,并把返回的数据放置到指定的元素中[/b].
[i]url 规定要将请求发送到哪个 URL。
data 可选。规定连同请求发送到服务器的数据。
function(response,status,xhr)
额外的参数:
response - 包含来自请求的结果数据
status - 包含请求的状态("success", "notmodified", "error", "timeout" 或 "parsererror")
xhr - 包含 XMLHttpRequest 对象[/i]
以下所用路径请参见:
JSP:引用文件(绝对路径)[url]http://liuzidong.iteye.com/blog/1198188[/url]
用法一 GET请求
示例代码如下:
<%@ include file="/common/meta.jsp" %>
<link rel="stylesheet" href="style/mystyle.css" type="text/css">
<script src="scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function() {
$("#btnAjaxGet").click(function(event) {
//发送Get请求:可指定加载文件中的哪些项目,请使用jQuery选择器,常见的有: ID,CLASS,元 素选择器,参见以下调用
var username = encodeURI(encodeURI($("#username").val()));
// $("#divResult").load("jqueryLoad?username=" + username + "&un="+$("#username").val()+"×tamp=" + (new Date()).getTime());
// $("#divResult").load("${ctx}/data/sample.dom.html .myList");
// $("#divResult").load("${ctx}/data/sample.dom.html img");
// $("#divResult").load("data/sample.dom.html div[title='myTitle1']");
$("#divResult").load("data/sample.dom.html #languages");
//$("#divResult").load("data/sample.dom.txt");
// $("#divResult").load("index.jsp");
});
})
</script>
JqueryLoadServlet .java
public class JqueryLoadServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
String v = request.getParameter("username");
String username = java.net.URLDecoder.decode((String) request.getParameter("username"), "UTF-8");
System.out.println("v: " + v + ",username: " + username );
StringBuilder tables = new StringBuilder();
tables.append("<table id='languages' border='0' cellspacing='1'>");
tables.append("<thead>");
tables.append("<tr>");
tables.append("<th>Languagetables</th>");
tables.append("<th>Typetables</th>");
tables.append("<th>Inventedtables</th>");
tables.append("</tr>");
tables.append("</thead>");
tables.append("<tbody>");
tables.append("<tr>");
tables.append("<td>Javatables</td>");
tables.append("<td>Statictables</td>");
tables.append("<td>1995tables</td>");
tables.append("</tr>");
tables.append("<tr>");
tables.append("<td>Rubytables</td>");
tables.append("<td>Dynamictables</td>");
tables.append("<td>1993tables</td>");
tables.append("</tr>");
tables.append("<tr>");
tables.append("<td>Smalltalktables</td>");
tables.append("<td>Dynamictables</td>");
tables.append("<td>1972tables</td>");
tables.append("</tr>");
tables.append("<tr>");
tables.append("<td>C++tables</td>");
tables.append("<td>Statictables</td>");
tables.append("<td>1983tables</td>");
tables.append("</tr>");
tables.append("</tbody>");
tables.append("</table>");
// out.println(username+" " + new java.util.Random().nextInt(100));
out.print(tables.toString());
out.flush();
out.close();
}
}
注意事项:使用
$("#divResult").load("jqueryLoad?username=" + username + "&un="+$("#username").val()+"×tamp=" + (new Date()).getTime());
发送参数时,必须对参数进行二次编码操作:
var username = encodeURI(encodeURI($("#username").val()));
在后台也相应的进行解码操作:
String v = request.getParameter("username");
String username = java.net.URLDecoder.decode((String) request.getParameter("username"), "UTF-8");
用法二 POST请求
$("#btnAjaxPost").click(function(event)
{
var username = $("#username").val();
//发送Post请求
$("#divResult").load("${ctx}/jqueryLoad", { "username": username});
});
以上调用就不会产生乱码!
用法三 使用回调函数
$("#btnAjaxCallBack").click(function(event) {
var username = $("#username").val();
//发送Post请求, 返回后执行回调函数.
$("#divResult").load("${ctx}/jqueryLoad", { "username": username}, function(responseText, textStatus, XMLHttpRequest)
{
responseText = " Add in the CallBack Function! <br/>" + responseText +"<br/>" + textStatus + "," + XMLHttpRequest.status + "<br/>" + XMLHttpRequest.statusText ;
$("#divResult").html(responseText); //或者: $(this).html(responseText);
});
});
[color=red]总结如下:jQuery的load方法可指定加载静态文件,也可发送ajax请求,它常用于直接获取数据显示在页面中[/color]