jquery中ajax的实现

最新推荐文章于 2025-03-07 23:40:50 发布

原创最新推荐文章于 2025-03-07 23:40:50 发布 · 361 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery ajax

javaweb 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用 jQuery 的 $.post 方法实现异步数据加载。通过点击按钮触发请求，从服务器获取菜品数据，并更新页面内容。

通过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>中的关键代码如下

然后用jquery实现异步刷新

在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");
%>