Question

背景

我正在研究一个网站，当用户按下按钮时，该网站会执行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

cookies

立刻，我不堪重负。我相信我拥有我需要的所有数据，但与此同时，我不知道如何使用它来发出POST请求。

我在StackOverflow中搜索了类似的问题：

即使他们非常好，我也不能将我对他们的理解应用到我的案例中。

问题

我不明白我应该对cookie做什么，也不知道我是否必须手动添加每个请求标头。

关于表单数据，我知道我需要创建一个JSON对象并将其发送到我的XMLHttpRequest中，并包含所有Form Data个字段。

有人可以帮我发一个包含所有这些信息的HTTP POST请求吗？我们将非常感谢代码示例。

Answer 1

这是一个使用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(...)

Answer 2

我的解决方案

通过遵循@lucavgobbi的建议，我粗暴地强迫自己进入cookie世界，尝试所有组合，看看我需要哪些饼干以及我不需要哪些饼干。

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

至于请求，我使用XMLHttpRequest和URI.js库来解析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());

那就是它！

这是一个阅读所有内容的爆炸，老实说，我从来没有走过这么远。谢谢大家的提示！

如何制作完整的POST XMLHttpRequest？

背景

我尝试了什么

问题

2 个答案:

我的解决方案

代码