关于Ajax异步请求(实时刷新)

关于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>

友情提示：无论我们写多少级联动窗口，都是这个思路，一个ajax对应一个方法，然后这几个依次遍历，最终能够达到我们的需求