Ajax获取后台返回的json数据_ajax从后端查json数据-优快云博客

本文链接：https://blog.youkuaiyun.com/WhenTheWindBlows/article/details/88033211

本文介绍了一个场景，当用户点击“查看”按钮时，会弹出一个模态对话框，其中的内容通过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}" var="goods”，goods是后台返回的list的别名，需要放在c:forEach中，用于获取当前对象的id,即$ {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;
}