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

最新推荐文章于 2023-03-19 07:39:22 发布

大树叶

最新推荐文章于 2023-03-19 07:39:22 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： java json

本文链接：https://blog.youkuaiyun.com/bigtree_3721/article/details/71440321

java 同时被 2 个专栏收录

494 篇文章

订阅专栏

json

21 篇文章

订阅专栏

本文介绍使用AJAX发送JSON请求及通过Form表单POST提交数据至服务器的方法，并对比了两种方式下HTTP请求与响应的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单 (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