js's ajax interaction code

1. The load method of ajax:

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

#flexgrid div ID name

Note that the loaded page cannot import top.jsp, all jstl needs to be imported by itself

E.g

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

See the table for details:

parameter	describe
url	Specifies which URL to send the request to .
data	Optional. Specifies the data to send to the server along with the request.
function(response,status,xhr)	Optional. Specifies a function to run when the request completes. Extra parameters: response  - contains the result data from the request        status  - contains the        status of the request ( "success", "notmodified", "error", "timeout" or "parsererror" ) xhr  - contains the        XMLHttpRequest object

Examples are as follows:

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

If it is a serialized load, it is:

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

Where $("#dgridTeam *").serialize() , the id of the serialized div is all the forms under dgridTeam . Note * , it wouldn't work without him

If it is a form , just write the form name directly. For details, please refer to w3cschool, see the following link.

http://www.w3school.com.cn/jquery/ajax_serialize.aspSerialization _

http://www.w3school.com.cn/jquery/ajax_load.asp load method

2. Ajax post method

If we request the  test.php page, ignoring the return value:

$.post("test.php");

Here is an example of changing the text of a div element via an AJAX POST request :

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

The post() method loads data from the server through an HTTP POST request.

The syntax is:

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

See the following table for parameters and descriptions:

parameter	describe
url	Required. Specifies which URL to send the request to.
data	Optional. Map or string value. Specifies the data to send to the server along with the request.
success(data, textStatus, jqXHR)	Optional. Callback function to execute when the request is successful.
dataType	Optional. Specifies the data type of the expected server response. Smart judgment (xml, json, script or html) is performed by default.

This function is a shorthand Ajax function equivalent to:

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

Depending on the MIME type of the response, the return data passed to the success callback function is also different. This data can be an XML root element, a text string, a JavaScript file, or a JSON object. The text status of the response can also be passed to the success callback function.

As of jQuery 1.5 , it is also possible to pass a jqXHR object ( in jQuery 1.4 , an XMLHttpRequest object) to the success callback function . 

Most implementations will specify a success function:

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

This example reads the requested HTML fragment and inserts it into the page.

Pages read via POST are not cached, so the cache and ifModified options in jQuery.ajaxSetup() do not affect these requests.  

NOTE: Due to browser security limitations, most "Ajax" requests obey the same-origin policy; requests cannot successfully retrieve data from a different domain, subdomain, or protocol.

Note: If a request initiated by jQuery.post() returns an error code, there will be no notification unless the script has called the global .ajaxError() method . Or as of jQuery 1.5 , the .error() method of the jqXHR object returned by jQuery.post() can also be used for error handling. 

jqXHR object

As of jQuery 1.5 , all jQuery 's AJAX methods return a superset of the XMLHTTPRequest object. The jQuery XHR object or "jqXHR," returned by $.post() implements the agreed interface, giving it all its properties, methods, and agreed behavior. For convenience and consistency in the names of the callback functions used by $.ajax() , it provides the .error(), .success() and .complete() methods. These methods take a function parameter called when the request terminates, which accepts the same parameters as the correspondingly named $.ajax() callback function.  

The convention interface in jQuery 1.5 also allows jQuery 's Ajax methods, including $.post() , to chain multiple .success() , .complete() and .error() callbacks for the same request, even after the request may have already These callback functions are assigned when done.

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

    // do other tasks here
	
    // set another completion function for the above request
    jqxhr.complete(function(){ alert("second complete"); });

3. An instance of submitting and saving the 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;">Employee ID</td>
        <td style="width:16%;background:#fefcdd;">Employee name</td>
        <td style="width:16%;background:#fefcdd;">Grid Responsibilities</td>
        <td style="width:16%;background:#fefcdd;">Contact number</td>
        <td style="width:16%;background:#fefcdd;">Department</td>
        <td style="width:16%;background:#fefcdd;">Source Unit</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);" onclick="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>