spring mvc中返回ModelAndView後執行ajax非同步請求

阿新 • • 發佈：2019-01-19

起初是想如果返回的ModelAndView在jsp中的物件是否可轉為jquery可讀的json物件，我想對物件的資料進行單獨的處理，其他的資料直接用c標籤顯示在頁面上。但是查資料然後自己試都不行，只能取單獨的屬性值然後進行處理。全部取出比較麻煩。

後來又有了想法，一部分資料通過返回ModelAndView進行顯示，部分資料通過jquery的ajax非同步請求進行返回。結果證明這種方法可行，這樣我們需要的資料就在一個頁面上顯示了。然後在這裡做一個記錄。

因為考慮到很多方法的重用，需要把通用的方法提出來，比如select下拉，幾個頁面顯示的內容都有可能是一樣的。

先貼上後臺的程式碼：

view部分配置如下：

<bean id="viewResolver"
          class="org.springframework.web.servlet.view.InternalResourceViewResolver"
          p:prefix="/jsp/"
          p:suffix=".jsp" 
          />

我的想法是這樣的，當對 jsp/getAllUserInfo.do發出請求的時候，返回資料頁面，頁面通過$(document).ready();來呼叫js，去非同步請求 jsp/getSelect.do，顯示非同步請求的資料。

貼上前端的程式碼：

jstl.jsp頁面：

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>user page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../js/commons.js"></script>
<script type="text/javascript" src="../js/jstl.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		getSelect();
	});
</script>


</head>
<body>
<h5>${allUserInfo.userInfo.username}</h5>
<h5>${allUserInfo.userInfo.password}</h5>
<h5>${allUserInfo.name}</h5>
	<select id="select1">
		<c:forEach items="${allUserInfo.list}" var="e">
			<option value="${e}">${e}</option>
		</c:forEach>
		<script>
			$("#select1").val("${allUserInfo.name}");
		</script>
	</select>
	
	
	<p/>
	<select id="select2">
	
	</select>

</body>
</html>

ajax非同步請求：

function PostJSONQuery(postURL,json, on_success)
{
  $.ajax({
    url: postURL,
    type:"post",
    contentType : "application/x-www-form-urlencoded;charset=utf-8",
    processData : true,
    data: json,
    dataType: "json",
    success: function(response) {
      on_success(response);
    },
    error: function (xhr, ajaxOptions, thrownError) {
    	//showAlertInfo("error");
    }
  });
}

function getSelect(){
	alert("--");
	PostJSONQuery("getSelect.do",{},function(response){
		for(var i=0;i<response.length;i++){
			$("#select2").append("<option value="+response[i]+">"+response[i]+"</option>");
		}
		$("#select1").val("晒太陽");
	});
	
	
}

這裡有一個執行順序問題，首先肯定是返回頁面，將view資料顯示出來，然後再去頁面載入完成後會去呼叫ajax請求，

所以先會執行：

$("#select1").val("${allUserInfo.name}");

然後執行

alert("--");

最後執行

$("#select1").val("晒太陽");

因為最近比較空，在看自己之前做的專案，看看那邊做的不好，因為才參加工作半年，前面幾個專案寫的程式碼質量有點爛，現在看看真的是有點看不下去了。。。。。

以上是我學習發現的，拿出來給大家分享一下。

spring mvc中返回ModelAndView後執行ajax非同步請求

spring mvc中返回ModelAndView後執行ajax非同步請求

Spring MVC中返回JSON資料的幾種方式

Spring MVC中返回JSON數據的幾種方式

Spring MVC中 ModelAndView返回頁面不正確

解決Spring MVC @ResponseBody返回中文字符串亂碼問題

Spring MVC 中@autowired 註入後為null

spring mvc中DispatcherServlet如何得到ModelAndView的

spring boot中得定時任務執行一段時間後突然停了排查過程

spring mvc中ajax的呼叫（在上一篇的基本上）

在jsp頁面中使用EL表示式無法解析spring mvc中Model或者ModelAndView傳的值

Spring MVC中Controller如何將資料返回給頁面

spring mvc 中通過controller 傳遞物件給jsp，並且資料繫結，在修改值後回傳物件給controller

Spring-MVC中ModelAndView物件所新增的內容在前端用EL表示式獲取不到的問題

關於spring-mvc中使用ajax呼叫後臺接口出現400 bad request的問題解決方案

spring MVC中ajax請求路徑

使用HttpURLConnection呼叫url方式訪問spring mvc中的controller並傳json值與返回

spring mvc中關於url中傳遞中文亂碼的解決方法

spring mvc中，如何在 Java 代碼裏，獲取國際化內容

Spring MVC 中 HandlerInterceptorAdapter的使用

Spring MVC 中使用 Google kaptcha 驗證碼

spring mvc中返回ModelAndView後執行ajax非同步請求

相關推薦