通过jquery ajax方法,能够使用http get和http post从远程服务器上请求文本、html、xml或json,同时可以把这些外部数据直接载入网页的被选元素中
常用的方法有如下几种
1、客户端用get方法请求时可以使用$.get(url,[data],[callback],[type])方法
url:待载入页面的url地址
data:待发送key/value参数
callback:载入 成功时的回调函数
type:返回内容格式,xml、html、script、json、text,_default
2、客户端用post方法请求时可以使用$.post(url,[data],[callback],[type])方法
3、比较简单但强大的ajax方法
load(url,[data],[callback])
实例:
点击菜单查询,从数据库中查询出数据后,通过jquery实现异步刷新.
主要思路是在index.jsp页面中点击菜单查询,然后jquery的$.post(url,[data],[callback],[type])方法跳转到QryDishesServlet(一个servlet),实现从数据库查询出菜单数据,然后再从QryDishesServlet把查询出的数据传递到dishshow.jsp页面,然后再dishshow.jsp用表格显示数据,最后$.post()的回调函数将返回dishshow.jsp页面的内容,将其拼接在index.jsp页面指定的位置。
在index.jsp页面中的<body></body>中的关键代码如下
<body>
<button>显示菜单</button>
<div id="query_dishes"></div>
</body>
然后用jquery实现异步刷新
<script type="text/javascript">
//菜单查询
$("button").click(function(){
//发起一个请求
$.post("<%=basePath%>servlet/QryDishesServlet",//跳转到查询数据库中dish的servlet页面
{},function(data){
$("#query_dishes").empty(); //清空
$("#query_dishes").html(data);
});
});
</script>
在QryDishesServlet中的关键代码如下
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//获取数据
DishInfoDao dao=DAOFactory.createDishInfoDao();
List<DishInfo> dishInfo=dao.getAllDishInfo();
request.setAttribute("dishInfo", dishInfo);
//跳转到dishshow.jsp页面
request.getRequestDispatcher("/jsp/querydishinfo.jsp").forward(request, response);
}
在dishshow中关键代码如下
<%
List<DishInfo> dishs = (List<DishInfo>) request.getAttribute("dishInfo");
%>
<table id="customers">
<tr>
<th>菜品编号</th>
<th>菜品名称</th>
<th>菜品价格</th>
</tr>
<%
for (int i = 0; i < dishs.size(); i++) {
%>
<tr>
<td><%=dishs.get(i).getDishID()%></td>
<td><%=dishs.get(i).getName()%></td>
<td><%=dishs.get(i).getPrice() %></td>
</tr>
<%
}
%>
</table>