Ajax获取后台返回的json数据

本文介绍了一个场景,当用户点击“查看”按钮时,会弹出一个模态对话框,其中的内容通过Ajax从Java后台动态获取。利用Ajax发送请求,参数为后台返回list中对象的id,后台根据此id返回相应的JSON数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

情景描述:
点击页面“查看”按钮,弹出一个对话框(模态框),模态框中的数据来源于后台(java)。
头部引入

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="basePath" value="${pageContext.request.contextPath}" />
<script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script
src="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
.......省略 

{参数:<c:forEach items="goodList&quot;var=&quot;goods”,goods是后台返回的list的别名,需要放在c:forEach中,用于获取当前对象的id,即{goodList}&quot; var=&quot;goods”,goods是后台返回的list的别名,需要放在c:forEach中,用于获取当前对象的id,即goodList"var="goodsgoodslistc:forEachid,{goods.gId}并将值作为ajax的请求参数,传递给后台。}

<a class="btn btn-default btn-success"  role="button" id="editButton" onclick="query(${goods.gId})">查看</a>

<!-- 编辑(Modal)模态框 -->
<div class="modal fade" id="findForm" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">编辑</h4>
			</div>
			<div class="modal-body" id="edit">
					<input id="checkOne" type="text" name="goodName"><br />
					<input id="checkTwo" type="text" name="goodType"><br />
					<input id="checkThird" type="text" name="goodProduct"><br />
					<input id="checkFour" type="text" name="goodPrice"><br />
					<input id="checkFive" type="text" name="goodNum"><br />
					<input id="checkSix" type="text" name="goodNumPrice" id="goodNumPrice"
						readonly="readonly">
				<script type="text/javascript">
					function query(id){
						$.ajax({
							url:"${basePath}"+"/queryGood/"+id,
							type:"post",
							data:{
								id:id
							},
							datatype:"json",
							success:function(data){
								$("#checkOne").val(data.goodName);
							    $("#checkTwo").val(data.goodType);
							    $("#checkThird").val(data.goodProduct);
							    $("#checkFour").val(data.goodPrice);
							    $("#checkFive").val(data.goodNum);
							    $("#checkSix").val(data.goodNumPrice);
					
							    // 显示模态框
							    $('#findForm').modal('show');
			
								
							},
							error:function(){
								alert("数据传输异常");
							}
						
						});
					}
			
				</script>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal -->
</div>

后台:
//value的值对应ajax的url为 “${basePath}”+"/queryGood/"+id,

//controller中的一个查询方法
@RequestMapping(value="/queryGood/{id}",method=RequestMethod.POST)
@ResponseBody
public JSONObject findGoodById(@PathVariable("id") String id) {
	Good good = goodService.findGoodById(Integer.parseInt(id.trim()));
	JSONObject jsonObject = JSONObject.fromObject(good);
	//将查到的对象转化为json对象,传递给前台ajax  sunccess中的data数据。
	return jsonObject;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值