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代码：

		

				

					修改我的收获地址：

					
					收货人姓名：*


					电话号码 ：*


					省    ：*


					市    ：*

 
					详细地址 ：* 


					

						
							       
	 					
 					
				
 
        		

		 
		修改

4.jsp上的ajax代码：

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("");
		} 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

---

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