關於Ajax異步請求(實時刷新)
異步請求簡介
AJAX = 異步 JavaScript 和 XML。
AJAX 是一種用於創建快速動態網頁的技術。
通過在後臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。
有很多使用 AJAX 的應用程序案例：新浪微博、Google 地圖、開心網等等
準備工作
本博客是基於ssm框架的OA項目來實現的,具體環境是ssm+idea+mysql+maven+tomcat等，具體座標我就不多介紹了
預期效果
衆所周知我們進行軟件開發的時候，很多的時候會進入到一個界面中，是需要我們來添加或者查詢數據的，這些數據可能是有關聯的，也有可能是沒有關聯的,很多很多下拉框，這些數據其實都是從數據庫中讀取，動態填充的，下面咱們來做一個二級的請求，實現Ajax的異步請求，進而實現我們的效果
實現思路
1.首先我們要進入一個jsp頁面
2.將數據顯然在對應的區域中，通過後臺請求來獲取
3.由於這是關聯查詢，顯然是一個數據的傳遞會使另一個對象實現改變，這纔是我們關心的重點(接下來我們會重點分析這一點)
1.首先咱們進入一個jsp頁面
2.咱們要分析一個我們的下拉框選項
首先肯定是我們這兩個下拉框都是喲自己的屬性和相關的數據，可以看出來這都是一個下拉框，裏面有對應的屬性和數據，既然使用拼接的情況我們就會用到ajax異步請求，然後我們循環遍歷，取出我們的數據
<tr >
<td align="right" bgcolor="#FAFAF1" height="22">選擇項目：</td>
<td align='left' bgcolor="#FFFFFF" onMouseMove="javascript:this.bgColor='#FCFDEE';" onMouseOut="javascript:this.bgColor='#FFFFFF';" height="22">
<select id="pro" name="myproname" onchange="addayalisys(this.value)">
<option value=0>選擇項目</option>
</select>
</td>
</tr>
<tr >
<td align="right" bgcolor="#FAFAF1" height="22">需求：</td>
<td align='left' bgcolor="#FFFFFF" onMouseMove="javascript:this.bgColor='#FCFDEE';" onMouseOut="javascript:this.bgColor='#FFFFFF';" height="22">
<select id="anid" name="analysisFk">
</select>
</td>
</tr>
3.數據關聯的過程
那麼重點來了，我們怎麼知道我們在上面的數據變化了，我們下面的下拉框會隨着上面的變化而隨着發生改變的呢，顯然我們會發現這些每個第一個下拉框後面會寫一個onchange事件，當我們點擊不同的事件的時候會發生不同的數據，從而實現我們想要改變第一個數據的時候第二個數據也會隨之而發生改變，這就是實現了數據的二級顯示
4.二級數據拼接的數據
實現代碼
<%--使用ajax發送異步請求把項目和需求來刷新到頁面上--%>
<script type="text/javascript">
/*頁面一加載便異步加載獲取數據*/
$(function () {
$.ajax({
url:'${pageContext.request.contextPath}/mod/getProHasNeed',
type:'post',
dataType:'json',
success:function (data) {
$.each(data,function(index){
$("#pro").append("<option value='"+data[index].id+"_"+data[index].title+"_"+data[index].proname+"'>"+data[index].proname+"</option>")
});
}
})
});
//根據項目獲取項目對應的需求
function addayalisys(obj) {
alert(obj);
var arr = obj.split("_");
$("#anid option").remove(); //移除上一次添加的數據
$("#anid").append("<option value='"+arr[0]+"'>"+arr[1]+"</option>")
}
</script>
