springMVC前後臺交互
阿新 • • 發佈:2018-07-25
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前後臺交互