XMLHttpRequest 到带有文本区域和复选框的外部表单

Question

我正在尝试将 XMLHttpRequest 发送到包含文本区域和复选框的外部表单。我想将 textarea 中的文本（“将您的文本放入此框中”）替换为另一个字符串并取消选中该复选框，然后发送表单并获取结果。 形式或多或少是这样的：

<form name="aspnetForm" method="post" action="Tagger.aspx" id="aspnetForm" enctype="multipart/form-data">

      <input id="checkBoxOptions_0" type="checkbox" name="checkBoxOptions$0" checked="checked" />

      <textarea name="$txtbxInput" id="_txtbxInput">Put your text in this box.</textarea>

      <textarea name="$txtbxOutput" readonly="readonly" id="_txtbxOutput" class="output">Output box</textarea>

      <input type="submit" name="$btnTagIt" value="Tag It" id="_btnTagIt" class="sizeTopMargin" />
</form>

我已经尝试了使用两种不同选项的 XMLHttpRequest：第一个使用原始字符串返回 textarea 并默认选中复选框，第二个给出其中一行中解释的错误。

选项 1：

var data = "checkBoxOptions$0.checked=false"+"&$txtbxInput=New String Inserted";
var xhr = new XMLHttpRequest();
xhr.open('POST', "http://nlpdotnet.com/services/Tagger.aspx", true);
xhr.setRequestHeader("Content-type", "multipart/form-data");
xhr.onload = function () {
    var results = xhr.response;
}
xhr.send(data);

选项 2：

var formElement = document.getElementById("aspnetForm");
var formData = new FormData(formElement);//TypeError: Argument 1 of FormData.constructor is not an object
formData.append("$txtbxInput", "New String Inserted");

var xhr = new XMLHttpRequest();
xhr.open('POST', "http://nlpdotnet.com/services/Tagger.aspx", true);
xhr.setRequestHeader("Content-type", "multipart/form-data");
xhr.onload = function () {
    var results = xhr.response;
}
xhr.send(formData);

由于表单是外部的，我无法重新设计它的任何部分。有任何想法吗？谢谢！

Answer 1

您不应该尝试使用getElementById 获取表单元素。表单不在当前页面的 DOM 中，它在一个完全不同的文档中，没有加载到浏览器中。

您只需要手动构造formData 和一堆add 调用：

var formData = new FormData;
formData.add("$txtbxInput", "New String Inserted");
formData.add("$btnTagIt", "Tag It");
var xhr = new XMLHttpRequest();
xhr.open('POST', "http://nlpdotnet.com/services/Tagger.aspx", true);
xhr.setRequestHeader("Content-type", "multipart/form-data");
xhr.onload = function () {
    var results = xhr.response;
}
xhr.send(formData);