jquery ajax load

使用jQuery load 实现动态加载

最新推荐文章于 2025-04-02 20:23:03 发布

最新推荐文章于 2025-04-02 20:23:03 发布 · 124 阅读

文章标签：

#Ajax #jQuery #Servlet #HTML #thread #ViewUI

本文介绍了一种使用jQuery的load方法实现页面元素动态加载的方法。通过一个具体实例展示了如何利用Ajax请求从服务器获取HTML片段，并将其加载到当前页面指定元素中。此方法能够有效提升用户体验。

通过load，可以实现动态加载功能。下面这个例子实现的是加载页面的时候通过ajax请求servlet，然后servlet生成一个html的sub内容，在动态加载。类似很多portal上的part loading的功能

<!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 src='../jquery.js'></script>
<script>
$(document).ready(function(){
$('#context').append('<h3 id="loading">loading.......</h3>');
var myname = $('#name').val();
var mycity = $('#city').val();

//这个例子里面实际上不需要带参数，这里只是为了说明如何带参数查询,注意如果带参数，那么是post请求，否则get请求
$('#context').load('../LoadServlet',{"name":myname,"city":mycity},function(){
//alert("加载完毕");
$('#loading').remove();
});
/* $('#btnLoad').click(function(){
$('#context').append('<h3 id="loading">loading.......</h3>');
var myname = $('#name').val();
var mycity = $('#city').val();
$('#context').load('../LoadServlet',{"name":myname,"city":mycity},function(){
//alert("加载完毕");
$('#loading').remove();
});
});*/
});
</script>
</head>
<body>
<h1>AJAX的load测试</h1>
Name:<input name="name" id="name">
City:<input name="city" id="city">
</p>
<button id="btnLoad">加载</button>
<div id="context">
加载的html
</div>
</body>
</html>

java

package ajaxServlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
* Servlet implementation class LoadServlet
*/
public class LoadServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

/**
* Default constructor.
*/
public LoadServlet() {
// TODO Auto-generated constructor stub
}

/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

}

/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("name");
String city = request.getParameter("city");
//模拟延时
try
{
Thread.sleep(3000);
}
catch (InterruptedException e)
{
e.printStackTrace();
}
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
PrintWriter writer = response.getWriter();
writer.write("<h1>servlet给的一个回应html,您刚才输入的是"+name+" "+city+"</h1>");
writer.flush();
writer.close();
}

}