js的ajax交互的代码

1.ajax的load方法：

使用$("#flexgrid").load("${ctx}/grid/logicgrid/config/logicgrid/"+id+"/logicGridMain?&idLevel="+idLevel);

#flexgrid div 的ID名称

注意load的页面不能引入top.jsp，所有的jstl都需要自己引入

例如

load(url,data,function(response,status,xhr))

详见表格：

参数	描述
url	规定要将请求发送到哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
function(response,status,xhr)	可选。规定当请求完成时运行的函数。 额外的参数： ·        response - 包含来自请求的结果数据 ·        status - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"） ·        xhr - 包含 XMLHttpRequest 对象

例子如下：

$("#feeds").load("请求的URL", {limit: 25}, function(){
  alert("The last 25 entries in the feed have been loaded");
});

如果是带序列化的load就是：

$("#dgridTeam").load("${ctx}/grid/logicgrid/config/logicgrid/${dgridId}/teamEditTeamList?rd="+Math.random(),$("#dgridTeam *").serialize()+"&"+$("#addTeam2 *").serialize());

其中$("#dgridTeam *").serialize()，序列化div的id是dgridTeam下的所有表单。注意*，没有他不行

如果是form，则直接写form名称就可以。具体可以参考w3cschool，见以下链接。

http://www.w3school.com.cn/jquery/ajax_serialize.asp序列化

http://www.w3school.com.cn/jquery/ajax_load.aspload方法

2.ajax的post方法

如果我们请求 test.php 网页，忽略返回值：

$.post("test.php");

下面是一个通过 AJAX POST 请求改变 div 元素的文本的例子：

$("input").keyup(function(){
  txt=$("input").val();
  $.post("demo_ajax_gethint.asp",{suggest:txt},function(result){
    $("span").html(result);
  });
});

其中 post() 方法通过 HTTP POST 请求从服务器载入数据。

语法为：

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

参数与描述见下表：

参数	描述
url	必需。规定把请求发送到哪个 URL。
data	可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR)	可选。请求成功时执行的回调函数。
dataType	可选。规定预期的服务器响应的数据类型。 默认执行智能判断（xml、json、script 或 html）。

该函数是简写的 Ajax 函数，等价于：

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

根据响应的不同的 MIME 类型，传递给 success 回调函数的返回数据也有所不同，这些数据可以是 XML 根元素、文本字符串、JavaScript 文件或者 JSON 对象。也可向 success 回调函数传递响应的文本状态。

对于 jQuery 1.5，也可以向 success 回调函数传递 jqXHR 对象（jQuery 1.4 中传递的是 XMLHttpRequest 对象）。

大部分实现会规定一个 success 函数：

$.post("ajax/test.html", function(data) {
  $(".result").html(data);
});

本例读取被请求的 HTML 片段，并插入页面中。

通过 POST 读取的页面不被缓存，因此 jQuery.ajaxSetup() 中的 cache 和 ifModified 选项不会影响这些请求。

注释：由于浏览器安全方面的限制，大多数 "Ajax" 请求遵守同源策略；请求无法从不同的域、子域或协议成功地取回数据。

注释：如果由 jQuery.post() 发起的请求返回错误代码，那么不会有任何提示，除非脚本已调用了全局的 .ajaxError() 方法。或者对于 jQuery 1.5，jQuery.post() 返回的 jqXHR 对象的 .error() 方法也可以用于错误处理。

jqXHR 对象

对于 jQuery 1.5，所有 jQuery 的 AJAX 方法返回的是 XMLHTTPRequest 对象的超集。由 $.post() 返回的 jQuery XHR 对象或 "jqXHR,"实现了约定的接口，赋予其所有的属性、方法，以及约定的行为。出于对由 $.ajax() 使用的回调函数名称便利性和一致性的考虑，它提供了 .error(),.success() 以及 .complete() 方法。这些方法使用请求终止时调用的函数参数，该函数接受与对应命名的 $.ajax() 回调函数相同的参数。

jQuery 1.5 中的约定接口同样允许 jQuery 的 Ajax 方法，包括 $.post()，来链接同一请求的多个 .success()、.complete() 以及 .error() 回调函数，甚至会在请求也许已经完成后分配这些回调函数。

 var jqxhr = $.post("example.php", function() {
      alert("success");
    })
    .success(function() { alert("second success"); })
    .error(function() { alert("error"); })
    .complete(function() { alert("complete"); });

    // 在这里执行其他任务
	
    // 为上面的请求设置另一个完成函数
    jqxhr.complete(function(){ alert("second complete"); });

3.一个提交保存list的实例：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<fmt:setLocale value="${LANGUAGE}"/>
<%@taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<c:set var="theme" value="${sessionScope.theme}"/>

 <table class="search-table" style="width:99%;">
      <tr>
        <td style="width:16%;background:#fefcdd;">员工编号</td>
        <td style="width:16%;background:#fefcdd;">员工名称</td>
        <td style="width:16%;background:#fefcdd;">网格职责</td>
        <td style="width:16%;background:#fefcdd;">联系电话</td>
        <td style="width:16%;background:#fefcdd;">所在部门</td>
        <td style="width:16%;background:#fefcdd;">来源单位</td>
        <td style="width:16%;background:#fefcdd;">操作</td>
      </tr>
      
<c:if test="${model.memberList != null}">
	<c:forEach items="${model.memberList}" var="team" varStatus="st">
		<tr type="dataRow">
			<td style="width: 16%; background: #ffffff;">${team.staff.college}</td>
			<td style="width: 16%; background: #ffffff;">${team.staff.name}</td>
			<td style="width: 16%; background: #ffffff;"><tags:showlabel-status tableName="MEMBER_DUTY" columnName="DUTY" value="${team.gridTeamMemberDuty}"></tags:showlabel-status></td>
			<td style="width: 16%; background: #ffffff;">${team.staff.telNbr}</td>
			<td style="width: 16%; background: #ffffff;">${team.orgName}</td>
			<td style="width: 16%; background: #ffffff;">${team.sourceCompony}</td>
		    <td style="width:16%;background:#ffffff;"><a href="javascript:void(0);" οnclick="deleteTeamRel(this)">删除</a>
			    <input type="hidden" name="memberList[${st.index}].staff.college" value="${team.staff.college}"/>
			    <input type="hidden" name="memberList[${st.index}].staff.name" value="${team.staff.name}"/>
			    <input type="hidden" name="memberList[${st.index}].gridTeamMemberDuty" value="${team.gridTeamMemberDuty}"/>
			    <input type="hidden" name="memberList[${st.index}].staff.telNbr" value="${team.staff.telNbr}"/>
			    <input type="hidden" name="memberList[${st.index}].orgName" value="${team.orgName}"/>
			    <input type="hidden" name="memberList[${st.index}].sourceCompony" value="${team.sourceCompony}"/>
			    <input type="hidden" name="memberList[${st.index}].gridTemaId" value="${team.gridTeamId}"/>
			  	<input type="hidden" name="memberList[${st.index}].dgridId" value="${team.dgridId}"/>
			    <input type="hidden" name="memberList[${st.index}].gridTeamMemberId" value="${team.gridTeamMemberId}"/>
		    </td>
		</tr>
	</c:forEach>
</c:if>
</table>