表单 (form) JSP ajax http 请求和响应格式

表单 (form)  JSP ajax http 请求和响应格式.

 1) 在jsp页面中，用 Ajax  发送json请求的代码例子和 http 格式

var buildQueryParam = function(pageInd) {
var productId = $("#query-param-product-id").val();
var purchaseOrderId = $("#query-param-dispatched-po").val();
var warehouseId = $("#query-param-warehouse-id").val();
var relatedOrderId = $("#query-param-order-id").val();
var updateReason = $("#query-param-update-reason").val();
var startTime = $("#operate-time-start-value").val();
var endTime = $("#operate-time-end-value").val();
var data = {
"productId": productId,
"purchaseOrderId": purchaseOrderId,
"warehouseId": warehouseId,
"relatedOrderId": relatedOrderId,
"updateReason": updateReason,
"startTime": startTime,
"endTime": endTime,
"pageSize": manipulationHistory.pageSize,
"pageInd": pageInd || 1
};
return JSON.stringify(data);
};

imsPagination.loadTablePagination = function(namespace, paginationDiv, clearTableFunc, pageQueryPath, param, loadTableFunc) {
$.ajax({
url: pageQueryPath,
type: "post",
contentType:"application/json; charset=utf-8",
data: param,
success: function(response) {
if (response >= 0) {
namespace.pageCount = Math.ceil(response/namespace.pageSize);
updatePaginationHtml(namespace, paginationDiv, loadTableFunc);
if (response > 0) {
if (namespace.currentPage == undefined) {
namespace.currentPage = 1;
}
loadTableFunc(namespace.currentPage);
updatePaginationBar(namespace, paginationDiv, loadTableFunc);
} else {
clearTableFunc();
}
}
}
});
};

Ajax 产生的 http request header:

Accept-Encoding:gzip, deflate, br

Accept-Language:zh-CN,zh;q=0.8

Connection:keep-alive

Content-Length:159
Content-Type:application/json; charset=UTF-8

Cookie:Idea-79db2fcf=c0cdb884-cf20-44ac-b08e-3687d9c13133; JSESSIONID=31850F884D5D756B4E41D414927CC257

Host:localhost:8088

Origin:http://localhost:8088

Referer:http://localhost:8088/manipulationHistory/index?UID=15670&f=us_test_i&locale=en_US

User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36

X-Requested-With:XMLHttpRequest

request payload:

{"productId":"6002017041001","purchaseOrderId":"","warehouseId":"","relatedOrderId":"","updateReason":"","startTime":"","endTime":"","pageSize":10,"pageInd":1}

response header

HTTP/1.1 200 OK

Server: Apache-Coyote/1.1
Content-Type: application/json;charset=UTF-8

Transfer-Encoding: chunked

Date: Tue, 09 May 2017 01:53:08 GMT

response payload

[ {

  "productId" : "6002017041001",

  "productName" : "TestCC041001",

  "warehouseId" : 116,

  "warehouseName" : "LA.large warehouse ",

  "dispatchedPo" : "N/A",

  "relatedOrderId" : "4064914809112",

  "updateField" : "used_inventory",

  "action" : "+1",

  "result" : 7,

  "updateReason" : "Order creation",

  "operator" : "System",

  "operateTime" : "2017-04-25 17:34:57"

}, {

  "productId" : "6002017041001",

  "productName" : "TestCC041001",

  "warehouseId" : 116,

  "warehouseName" : "LA.large warehouse ",

  "dispatchedPo" : "N/A",

  "relatedOrderId" : "4064914809112",

  "updateField" : "used_inventory",

  "action" : "+1",

  "result" : 7,

  "updateReason" : "Order creation",

  "operator" : "System",

  "operateTime" : "2017-04-25 17:34:57"

}]

2) 在页面中，用 form post 方式提交代码样子和产生的 HTTP request/response

manipulationHistory.downloadData = function() {
//定义一个form表单
var myform = $("<form></form>");
myform.attr('method','post')
myform.attr('action',"/manipulationHistory/exportManipulationInfo");

var myProductId = $("<input type='hidden' name='productId' />")
myProductId.attr('value',$("#query-param-product-id").val());

var myPurchaseOrderId = $("<input type='hidden' name='purchaseOrderId' />")
myPurchaseOrderId.attr('value',$("#query-param-dispatched-po").val());

var myWarehouseId = $("<input type='hidden' name='warehouseId' />")
myWarehouseId.attr('value', $("#query-param-warehouse-id").val());

var myRelatedOrderId = $("<input type='hidden' name='relatedOrderId' />")
myRelatedOrderId.attr('value', $("#query-param-order-id").val());

var myUpdateReason = $("<input type='hidden' name='updateReason' />")
myUpdateReason.attr('value', $("#query-param-update-reason").val());

var myStartTime = $("<input type='hidden' name='startTime' />")
myStartTime.attr('value', $("#operate-time-start-value").val());

var myEndTime = $("<input type='hidden' name='endTime' />")
myEndTime.attr('value', $("#operate-time-end-value").val());

myform.append(myProductId);
myform.append(myPurchaseOrderId);
myform.append(myWarehouseId);
myform.append(myRelatedOrderId);
myform.append(myUpdateReason);
myform.append(myStartTime);
myform.append(myEndTime);
myform.submit();
};

<td>
<button id="manipulation-history-download-submit" class="ims-submit-btn btn btn-success btn-sm">
Download to Excel
</button>
</td>

$(function() {
if (typeof manipulationHistory == "undefined") {
manipulationHistory = {};
}

manipulationHistory.downloadData = function() {
//定义一个form表单
var myform = $("<form></form>");
myform.attr('method','post')
myform.attr('action',"/manipulationHistory/exportManipulationInfo");

var myProductId = $("<input type='hidden' name='productId' />")
myProductId.attr('value',$("#query-param-product-id").val());

var myPurchaseOrderId = $("<input type='hidden' name='purchaseOrderId' />")
myPurchaseOrderId.attr('value',$("#query-param-dispatched-po").val());

var myWarehouseId = $("<input type='hidden' name='warehouseId' />")
myWarehouseId.attr('value', $("#query-param-warehouse-id").val());

var myRelatedOrderId = $("<input type='hidden' name='relatedOrderId' />")
myRelatedOrderId.attr('value', $("#query-param-order-id").val());

var myUpdateReason = $("<input type='hidden' name='updateReason' />")
myUpdateReason.attr('value', $("#query-param-update-reason").val());

var myStartTime = $("<input type='hidden' name='startTime' />")
myStartTime.attr('value', $("#operate-time-start-value").val());

var myEndTime = $("<input type='hidden' name='endTime' />")
myEndTime.attr('value', $("#operate-time-end-value").val());

myform.append(myProductId);
myform.append(myPurchaseOrderId);
myform.append(myWarehouseId);
myform.append(myRelatedOrderId);
myform.append(myUpdateReason);
myform.append(myStartTime);
myform.append(myEndTime);
myform.submit();
};

manipulationHistory.init = function() {

$("#manipulation-history-download-submit").click(function(){
manipulationHistory.downloadData();
});

});

 
form POST 产生的 request header:

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8

Accept-Encoding:gzip, deflate, br

Accept-Language:zh-CN,zh;q=0.8

Cache-Control:max-age=0

Connection:keep-alive

Content-Length:103
Content-Type:application/x-www-form-urlencoded

Cookie:Idea-79db2fcf=c0cdb884-cf20-44ac-b08e-3687d9c13133; JSESSIONID=31850F884D5D756B4E41D414927CC257

Host:localhost:8088

Origin:http://localhost:8088

Referer:http://localhost:8088/manipulationHistory/index?UID=15670&f=us_test_i&locale=en_US

Upgrade-Insecure-Requests:1

User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36

request body (注意这是 form url-encoded，也就是如果有空格等字符，它会用%20来替换它)

productId=6002017041001&purchaseOrderId=&warehouseId=&relatedOrderId=&updateReason=&startTime=&endTime=

received response for form post request (下载excel file)

HTTP/1.1 200 OK

Server: Apache-Coyote/1.1

Content-Disposition: filename=ManipulationInfoData-295042061.xls

Content-Type: application/vnd.ms-excel

Transfer-Encoding: chunked

Date: Tue, 09 May 2017 01:57:22 GMT