Question

我正在尝试将XMLHttpRequest发送到包含textarea和复选框的外部表单。我想用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);

使用textarea和复选框

1 个答案: