jquery中ajax的实现

通过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>



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值