jquery ajax load

xujunJ2EE

浏览: 71071 次
性别:
来自: 南京

最近访客更多访客>>

anttu

javamingming

yuanjh2001

anluyun

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Ajax jQuery Servlet HTML thread

通过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();
}

}

分享到：