Ajax请求JSON数据回显到模态框(jsp回显)

Ajax请求JSON数据回显到模态框(jsp回显)

说明

jsp数据回显，通过Ajax请求servlet，将查询到的数据返回给jsp页面或者模态框中显示，以便用户在更新数据时提高用户体验。

示例代码

我这里用了弹窗。我个人感觉我写不出好的前端
1.css 代码(弹窗样式)：

/* 边框及背景样式 */
.black_overlay {
	position: fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    display: none;
    background-color: rgba(0, 0, 0, 0.1);
}
/* 修改 */
.white_content1 {
	display: none;
	position: absolute;
	top: 25%;
	left: 25%;
	width: 24%;
	height: 50%;
	padding: 20px;
	border: 1px solid orange;
	background-color: white;
	z-index: 1002;
	overflow: auto;
}

2.js 代码(触发弹窗)：

//修改
$(function() {
	$("#updateId").click(function() {
		document.getElementById('light1').style.display = 'block';
		document.getElementById('fade').style.display = 'block';
	});
	$("#buttonId1").click(function() {
		document.getElementById('light1').style.display = 'none';
		document.getElementById('fade').style.display = 'none';
	});
});

3.jsp代码：

<!--修改地址 -->
		<form action="OrderMasterServlet?id=${listUserAddress.id}&method=update" method="post" >
				<div id="light1" class="white_content1">
					<span size="4" color="red"><em>修改我的收获地址：</em></span><hr>
					
					收货人姓名：*<input type="text" name="AddrName" id="AddrNameId"><br><br>
					电话号码&emsp;：*<input type="text" name="AddrPhone" id="AddrPhoneId"><br><br>
					省&emsp;&emsp;&emsp;&emsp;：*<input type="text" name="Province" id="ProvinceId"><br><br>
					市&emsp;&emsp;&emsp;&emsp;：*<input type="text" name="City" id="CityId"><br><br> 
					详细地址&emsp;：*<input type="text" name="Detail" id="DetailId"> <br><br>
					<div id="div4">
						<input type="button" name="close" value="取消" id="buttonId1" />
							&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
	 					<input type="submit" value="确定">
 					</div>
				</div> 
        		<div id="fade" class="black_overlay"></div>
		 </form>
		<a href = "javascript:void(0)" id="updateId" onclick="but(${listUserAddress.id})"><font size="3">修改</font></a>

4.jsp上的ajax代码：

<script type="text/javascript" src="admin/style/js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript">
//通过id来修改数据
function but(id){
	//获取servlet传过来的值
	$.ajax({
		type:'post',
		//async : 'false', //async，true是异步传输，false指同步传输
		dataType:'json', //dataType是数据类型，json: 返回 JSON 数据 。
		cache : 'false', //cache属性是flase时：每次读取的是最新的数据。
		url:'UpdateUserAddrServlet',
		data:{"id":id},
		success:function(data){
			//将数据回显到弹窗
			$("#AddrNameId").val(data.addrName);
			$("#AddrPhoneId").val(data.addrPhone);
			$("#ProvinceId").val(data.province);
			$("#CityId").val(data.city);
			$("#DetailId").val(data.detail);
		}
	});
}
</script>

5.servlet代码：

@WebServlet("/UpdateUserAddrServlet")
public class UpdateUserAddrServlet extends HttpServlet {

	private OrderMasterService orderMasterService = new OrderMasterServiceImpl();

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		this.doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// 要先查询要修改的数据，为了在页面中显示
		// 获取要修改地址的id
		String id = request.getParameter("id");
		// 判断获取的id值，如果获取的id值为空，则不能进行更新操作
		if (id.length() == 0) {
			// 如果获取的id值为空，则返回页面并提示
			response.getWriter().append("<script language='javascript'>"
					+ "alert('您还没有地址，不能进行修改操作，请先添加地址！');window.location.href=" + "'submitOrder.jsp';</script>");
		} else {
			UserAddress find;
			try {
				// 调用findUserAddressById方法，将要修改的地址显示出来
				find = orderMasterService.findUserAddressById(Integer.parseInt(id));
				//new 一个Gson()对象，将查到的数据返回给Ajax
				Gson gson = new Gson();
				String json = gson.toJson(find);
				PrintWriter out = response.getWriter();
				//将值传递给Ajax
				out.print(json);
				out.flush();
				out.close();
			} catch (NumberFormatException | SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
	}

所用到的jar包

百度网盘获取jar包：
链接：https://pan.baidu.com/s/1YXtuKovGimQ69wYYFKHHxw
提取码：k86s

---

在学习中总会遇到各种问题，在解决之后，下次不一定还会记得，所有把它写在博客上，一方面可以下次查看；另一方面可以分享出来，有不足之处，望批评指正。