Javascript 如何制作完整的PostXMLHttpRequest？ 背景

我正在研究一个网站，当用户按下按钮时，它会执行POST请求。我的目标是使用JavaScript

XMLHttpRequest

或任何其他小型库来模拟POST请求

我试过的 我的第一步是使用谷歌浏览器和网络标签。通过这样做，我得到了以下信息：

概述：

Request URL:https://bananaswebsite.com/_ui/common/list/ListServlet
Request Method:POST
Status Code:200 OK
Remote Address:00.00.000.000:000

Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.8,es;q=0.6
Connection:keep-alive
Content-Length:173
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Cookie:LONG_STRING_HERE
DNT:1
Host:bananaswebsite.com
Origin:https://bananaswebsite.com
Referer:https://bananaswebsite.com/500?fcf=00B60000007Ewl7
User-Agent:Mozilla/5.0 (X11; CrOS x86_64 9000.58.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.58 Safari/537.36

action:filter
filterId:00B60000007Ewl7
filterType:t
page:1
rowsPerPage:100
search:
sort:
rolodexIndex:-1
retURL:/500?fcf=00B60000007Ewl7&rolodexIndex=-1&page=1

请求头：

Request URL:https://bananaswebsite.com/_ui/common/list/ListServlet
Request Method:POST
Status Code:200 OK
Remote Address:00.00.000.000:000

Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.8,es;q=0.6
Connection:keep-alive
Content-Length:173
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Cookie:LONG_STRING_HERE
DNT:1
Host:bananaswebsite.com
Origin:https://bananaswebsite.com
Referer:https://bananaswebsite.com/500?fcf=00B60000007Ewl7
User-Agent:Mozilla/5.0 (X11; CrOS x86_64 9000.58.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.58 Safari/537.36

action:filter
filterId:00B60000007Ewl7
filterType:t
page:1
rowsPerPage:100
search:
sort:
rolodexIndex:-1
retURL:/500?fcf=00B60000007Ewl7&rolodexIndex=-1&page=1

表单数据：

Request URL:https://bananaswebsite.com/_ui/common/list/ListServlet
Request Method:POST
Status Code:200 OK
Remote Address:00.00.000.000:000

Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.8,es;q=0.6
Connection:keep-alive
Content-Length:173
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Cookie:LONG_STRING_HERE
DNT:1
Host:bananaswebsite.com
Origin:https://bananaswebsite.com
Referer:https://bananaswebsite.com/500?fcf=00B60000007Ewl7
User-Agent:Mozilla/5.0 (X11; CrOS x86_64 9000.58.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.58 Safari/537.36

action:filter
filterId:00B60000007Ewl7
filterType:t
page:1
rowsPerPage:100
search:
sort:
rolodexIndex:-1
retURL:/500?fcf=00B60000007Ewl7&rolodexIndex=-1&page=1

很快，我就不知所措了。我相信我在这里有我需要的所有数据，但我同时，我不知道如何使用它来提出POST请求

我在StackOverflow搜索类似的问题：

即使它们非常好，我也无法将我对它们的理解应用到我的案例中

问题 我不知道我应该如何处理cookies，也不知道我是否必须手动添加每个请求头

关于表单数据，我知道我需要创建一个JSON对象，并将其与所有

表单数据

字段一起发送到XMLHttpRequest中

---

有人能帮我用这些信息发出HTTP POST请求吗？请提供一个代码示例。

这里是一个将JQuery与XMLHTTPRequest结合使用的示例（由ajax方法使用）。代码可以简化，但它包含通过XMLHTTPRequest发布所需的内容

$(document).on('click', '.button_deleteFileUpload', function () {
            var $this = $(this);
            // reference for deleting the row upon success
            var $currentRow = $this.closest('tr');

            // get information about the file
            var fileTitle = $this.attr('data-fileTitle');
            var fileName = $this.attr('data-fileName');
            var fileType = $this.attr('data-fileType')
            var producerCode = $this.attr('data-producerCode');

            // If the user confirms that they would like to delete the document, fire off the ajax call to attempt to delete it.
            var confirmation = confirm("Are you sure that you would like to delete the " + fileType + " file '" + fileTitle + "'?");
            if (confirmation) {
                $.ajax({
                    type: "POST",
                    url: "/WebServices/PMWebServices.asmx/DeleteLocationMaintenanceFile",
                    data: '{fileTitle: "' + fileTitle + '", fileName: "' + fileName + '", producerCode: "' + producerCode + '" }',
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json',
                    success: function (data) {
                        // on success, remove the row from the page
                        $currentRow.remove();
                    }, // success
                    error: function (xhr, httpStatusMessage, customErrorMessage) {
                        alert("An error occurred while attempting to delete the following : \n"
                        + "File Title : " + fileTitle + "\n"
                        + "File Name : " + fileName + "\n"
                        + "Producer Code : " + producerCode + "\n\n\n"
                        + "Please contact IT for additional support with this issue.");
                    } // error
                }); // ajax()
            } // if
        });    // .on(...)

---

下面是一个将JQuery与XMLHTTPRequest结合使用的示例（由ajax方法使用）。代码可以简化，但它包含通过XMLHTTPRequest发布所需的内容

$(document).on('click', '.button_deleteFileUpload', function () {
            var $this = $(this);
            // reference for deleting the row upon success
            var $currentRow = $this.closest('tr');

            // get information about the file
            var fileTitle = $this.attr('data-fileTitle');
            var fileName = $this.attr('data-fileName');
            var fileType = $this.attr('data-fileType')
            var producerCode = $this.attr('data-producerCode');

            // If the user confirms that they would like to delete the document, fire off the ajax call to attempt to delete it.
            var confirmation = confirm("Are you sure that you would like to delete the " + fileType + " file '" + fileTitle + "'?");
            if (confirmation) {
                $.ajax({
                    type: "POST",
                    url: "/WebServices/PMWebServices.asmx/DeleteLocationMaintenanceFile",
                    data: '{fileTitle: "' + fileTitle + '", fileName: "' + fileName + '", producerCode: "' + producerCode + '" }',
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json',
                    success: function (data) {
                        // on success, remove the row from the page
                        $currentRow.remove();
                    }, // success
                    error: function (xhr, httpStatusMessage, customErrorMessage) {
                        alert("An error occurred while attempting to delete the following : \n"
                        + "File Title : " + fileTitle + "\n"
                        + "File Name : " + fileName + "\n"
                        + "Producer Code : " + producerCode + "\n\n\n"
                        + "Please contact IT for additional support with this issue.");
                    } // error
                }); // ajax()
            } // if
        });    // .on(...)

我的解决方案 根据@lucavgobbi的建议，我的野蛮人强迫自己进入了饼干世界，尝试了所有的组合，看看我需要哪些饼干，哪些不需要

最后，我意识到我不需要饼干来提出我的要求！这是一个巨大的帮助

至于请求，我使用

XMLHttpRequest

与库一起解析URL，这是一个巨大的帮助

最终，我能够轻松地提出请求，并且我的代码比以前的所有答案都更小、更容易理解

代码 我将以下指令封装到一个函数中，但没有函数您可以轻松完成：

    let http = new XMLHttpRequest();

    let formParams = {
        action: "filter",
        filterId: "blah"
        //other parameters
    };

    let requestURL = URI("https://www.bananaswebsite.com");

    http.open("POST", requestURL.toString(), true);

    //Send the proper header information along with the request
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8");

    //Call a function when the state changes.
    http.onreadystatechange = function() {
        if (http.readyState == 4 && http.status == 200) {
            console.log(http.responseText);
        }
    };
    requestURL.addSearch(formParams);
    http.send(requestURL.query());

就这样

通读所有的东西真是太棒了，老实说，我从没想过我能走这么远。谢谢大家的提示

我的解决方案 根据@lucavgobbi的建议，我的野蛮人强迫自己进入了饼干世界，尝试了所有的组合，看看我需要哪些饼干，哪些不需要

最后，我意识到我不需要饼干来提出我的要求！这是一个巨大的帮助

至于请求，我使用

XMLHttpRequest

与库一起解析URL，这是一个巨大的帮助

最终，我能够轻松地提出请求，并且我的代码比以前的所有答案都更小、更容易理解

代码 我将以下指令封装到一个函数中，但没有函数您可以轻松完成：

    let http = new XMLHttpRequest();

    let formParams = {
        action: "filter",
        filterId: "blah"
        //other parameters
    };

    let requestURL = URI("https://www.bananaswebsite.com");

    http.open("POST", requestURL.toString(), true);

    //Send the proper header information along with the request
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8");

    //Call a function when the state changes.
    http.onreadystatechange = function() {
        if (http.readyState == 4 && http.status == 200) {
            console.log(http.responseText);
        }
    };
    requestURL.addSearch(formParams);
    http.send(requestURL.query());

就这样

---

通读所有的东西真是太棒了，老实说，我从没想过我能走这么远。谢谢大家的提示

你到底不明白什么？我不明白；我不知道如何处理cookies，如果我必须手动设置请求头的每个字段。将更新我的问题！您需要确定服务器需要哪些cookie来验证您的帖子并返回2XX响应。所需的cookie将根据所使用的后端技术而有所不同。所以我必须使用蛮力方法并手动测试每个cookie？你能给我举一个小例子，用一些cookies和一个简单的对象发送一个post请求吗？你到底不明白什么；我不知道如何处理cookies，如果我必须手动设置请求头的每个字段。将更新我的问题！您需要确定服务器需要哪些cookie来验证您的帖子并返回2XX响应。所需的cookie将根据所使用的后端技术而有所不同。所以我必须使用蛮力方法并手动测试每个cookie？你能给我举一个小例子，用一些cookies和一个简单的对象发送post请求吗？