1. 程式人生 > >springMVC前後臺交互

springMVC前後臺交互

app -i 參數 The lse onu d+ seconds bind

後臺返回json對象:

package com.sawshaw.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.alibaba.fastjson.JSONObject;

@Controller
@RequestMapping("/hello")
public class HelloController {
	@RequestMapping("/greeting")
	@ResponseBody
	public String greeting(){
		JSONObject js=new JSONObject();
		js.put("id", "myId");
		js.put("content", "mycontent");
		return js.toJSONString();
	}

}

前臺解析:

$(document).ready(function() {
            $.ajax({
                url: "hello/greeting"
            }).then(function(data) {
            	var obj=JSON.parse(data);
             //或者var obj=eval("("+data+")");解析
            	console.log(obj.id);
               $(‘.greeting-id‘).append(obj.id);
               $(‘.greeting-content‘).append(obj.content);
            });
        });
        </script>

後臺返回數組數據的: 

@Override
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		int user_id = Integer.parseInt(request.getParameter("user_id"));
		User user;
		try {
			user = service.queryUserById(user_id);
			if (user != null) {
				response.getWriter().print(user.getUser_name() + "," + user.getUser_phone() + "," + user.getUser_email() + "," + user.getUser_adress());
			} else {
				response.getWriter().print("false");
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}

 前臺解析:

 <script>
	$(function(){
   	var id=getUrlParam("id").replace(/\+/g," ");
   			$("#u_id").val(id);
   			$.ajax({
				url : ‘queryByUserId‘,
				type : ‘get‘,
				contentType : ‘text/html‘,
				data : {user_id:id}
			}).done(function(data) {
				if(data!=false){
				var arr=data.split(",");
				if(arr[0]!="null"){
					$("#u_name").val(arr[0]);
				}
				if(arr[1]!="null"){
					$("#u_phone").val(arr[1]);
				}
				if(arr[2]!="null"){
					$("#u_email").val(arr[2]);	
				}
				if(arr[3]!="null"){
					$("#u_adress").val(arr[3]);
				}
				}else{
					alert("查找用戶失敗");
				}
			}).fail(function(data) {
			}).always(function() {
				console.log("complete");
			});
			$("#updateSubmit").click(function(){
				if($("#u_name").val()==""){
					alert("用戶名不為空");
				}
			});
   	});
   	function getUrlParam(name){
		var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //構造一個含有目標參數的正則表達式對象
		var r = window.location.search.substr(1).match(reg);  //匹配目標參數
		if (r!=null) return unescape(r[2]); return null; //返回參數值
		}
   </script>

後臺返回json數組的:

@WebServlet(urlPatterns = "/userQueryOrder")
public class OrderUserQueryOrderServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	OrderService service = new OrderServiceImpl();

	@Override
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		HttpSession session = request.getSession();
		User user = (User) session.getAttribute("user");
		int user_id = user.getUser_id();
		try {
			List<Order> list = service.userQueryOrder(user_id);
			JSONArray orderList = JSONArray.fromObject(list);
			response.getWriter().println(orderList);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

  

前臺解析:

$.ajax({
			url : ‘userQueryOrder‘,
			type : ‘get‘,
			dataType : ‘json‘,
			contentType:‘text/html‘
		}).done(function(data) {
			//var json=eval("("+data+")");
			for(var i=0;i<data.length;i++){
				$("#orderList").append("<table>"
					+"<tr class=‘order_detail‘>"
						+"<td class=‘order_id‘>"+ data[i].order_id+"</td>"
						+"<td class=‘order_price‘>"+data[i].order_price+"</td>"
						+"<td class=‘order_time‘>"+(parseInt(data[i].order_time.year)+1900)+"-"+(parseInt(data[i].order_time.month)+1)+"-"+(data[i].order_time.date)+" "+(parseInt(data[i].order_time.hours)+1)+":"+(data[i].order_time.minutes)+":"+(data[i].order_time.seconds)+"</td>"
					+"</tr>"
				+"</table>"
				+"<table class=‘orderDetail‘ style=‘display:none;‘>"
				+"<tr>"
					+"<td>商品名</td>"
					+"<td>價格(元)</td>"
					+"<td>數量</td>"
				+"</tr>"
			+"</table>"
			+"<div class=‘XX‘>"
			+"</div>");
			}
		}).fail(function(data) {

  

 

 

  

springMVC前後臺交互