基于jQuery的ajax

最新推荐文章于 2024-07-18 16:36:56 发布

HelloWorld！！！

最新推荐文章于 2024-07-18 16:36:56 发布

阅读量232

点赞数

分类专栏： ajax 文章标签： ajax json 分类异步处理 jquery

本文链接：https://blog.csdn.net/bright_light12345/article/details/82585705

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ajax: 异步通信技术的一种实现；

不刷新页面的情况下，客户端浏览器网页可以跟服务器后天进行数据交换；

1、触发一个js事件（单击、键盘、change、blur、focus.....

2、调用jQuery的ajax方法

jQuery.post(url, [data], [callback], [type])

url:发送请求地址。

data:待发送 Key/value 参数。

callback:发送成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

3、编写服务器的代码，完成ajax需要的功能,并通过io输出数据；

out.print(返回数据字符串)；

4、jQuery的ajax方法处理回调函数的业务（callback方法）

实现首页商品分类

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>XXX网络商城</title>
		<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css" />
		<script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js" type="text/javascript"></script>
		<script src="${pageContext.request.contextPath}/js/bootstrap.min.js" type="text/javascript"></script>
	</head>
	<body>
		<div class="container-fluid">

			<!--
            	描述：菜单栏
            -->
			<div class="container-fluid">
				<div class="col-md-4">
					<img src="${pageContext.request.contextPath}/img/logo2.png" />
				</div>
				<div class="col-md-5">
					<img src="${pageContext.request.contextPath}/img/header.png" />
				</div>
				<div class="col-md-3" style="padding-top:20px">
					<ol class="list-inline">
						<c:if test="${empty loginUser}">
							<li><a href="${pageContext.request.contextPath}/UserServlet?method=loginUI">登录</a></li>
							<li><a href="${pageContext.request.contextPath}/UserServlet?method=registUI">注册</a></li>
						</c:if>
						
						<c:if test="${not empty loginUser}">
							<li>欢迎${loginUser.username}</li>
							<li><a href="${pageContext.request.contextPath}/UserServlet?method=loginOut">退出</a></li>
							<li><a href="${pageContext.request.contextPath}/jsp/cart.jsp">购物车</a></li>
							<li><a href="${pageContext.request.contextPath}/jsp/order_list.jsp">我的订单</a></li>
						</c:if>
					</ol>
				</div>
			</div>
			<!--
            	描述：导航条
            -->
			<div class="container-fluid">
				<nav class="navbar navbar-inverse">
					<div class="container-fluid">
						<!-- Brand and toggle get grouped for better mobile display -->
						<div class="navbar-header">
							<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
								<span class="sr-only">Toggle navigation</span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>
							<a class="navbar-brand" href="${pageContext.request.contextPath}/IndexServlet">首页</a>
						</div>

						<!-- Collect the nav links, forms, and other content for toggling -->
						<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
							<ul class="nav navbar-nav" id="cats">
								<%-- <c:forEach items="${allCats}" var="c">
								<li><a href="#">${c.cname}</a></li>
								</c:forEach> --%>
								<!-- 通过ajax实现商品分类栏 -->
							</ul>
							<form class="navbar-form navbar-right" role="search">
								<div class="form-group">
									<input type="text" class="form-control" placeholder="Search">
								</div>
								<button type="submit" class="btn btn-default">Submit</button>
							</form>

						</div>
						<!-- /.navbar-collapse -->
					</div>
					<!-- /.container-fluid -->
				</nav>
			</div>
		</div>
	</body>
	
	<script type="text/javascript">
		$(function(){
			var url = "/store_01/CategoryServlet";
			var obj = {"method":"findAllCats"};
			$.post(url,obj, function(data) {
				$.each(data, function(i, elt) {
					var li = "<li><a href='/store_01/ProductServlet?method=findProductByCidWithPage&num=1&cid="+elt.cid+"'>"+elt.cname+"</a></li>";
					$("#cats").append(li);
				}); 
			}, "json")
		});
	</script>

</html>

CategoryServlet中的findAllCats方法

public class CategoryServlet extends BaseServlet {
	private static final long serialVersionUID = 1L;

	public String findAllCats (HttpServletRequest req, HttpServletResponse resp) throws Exception {
		CategoryService categoryService = new CategoryServiceImp();
		List<Category> list = categoryService.getAllCats();
		
		String json = JSONArray.fromObject(list).toString();
		//告诉浏览器本次响应数据时json格式的字符串
		resp.setContentType("application/json;charset=utf-8");
		resp.getWriter().print(json);
		return null;
	}

}

这里用到了json-lib-2.4-jdk15.jar包将从数据库中的数据查找出来转换成json字符串传到前端页面

HelloWorld！！！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于jQuery的ajax

ajax: 异步通信技术的一种实现；不刷新页面的情况下，客户端浏览器网页可以跟服务器后天进行数据交换； 1、触发一个js事件（单击、键盘、change、blur、focus..... 2、调用jQuery的ajax方法 jQuery.post(url, [data], [callback], [type]) url:发送请求地址。 data:待发送 Key/value ...
复制链接

扫一扫