Javascript 无重定向的POST表单

我想

post

a表单的数据到将进行数据库查询的页面

但我不希望像在正常情况下一样，打开一个新页面，或者站点被重定向。它应该像一个“隐藏”的帖子

我尝试将

xmlhttp请求（GET）

与URL一起使用，但由于有许多表单字段，您可以在其中输入几句文字，因此URL变得非常长

我也听说过“POST”

xmlhttp请求

，但我还没有找到一个很好的教程和一个工作示例

我不想使用jQuery或类似的东西

有人知道如何做到这一点，或者XMLHTTPPOST是如何工作的吗

下面是我用来获取的代码：（但我不想做

var ID1=…

部分。我只想通过

$\u POST

像常规的

提交

那样获取值

function doGET() {
    var ID1 = document.getElementByID("Textfield1").value;
    var ID2 = document.getElementByID("Textfield2").value;
    var ID3 = document.getElementByID("Checkbox1").value;

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystate = function() { alert(msg); }

    xmlhttp.open("GET", "insert.php?ID1=" + ID1 + "&ID2" + ID2 + "&ID3=" + ID3, true);
    xmlhttp.send();
}

HTML

TEXT1



文本2



复选框1



点击

发送

POST

请求与发送

GET

请求没有太大区别。不过，我将在下面指出两个关键区别：

由于您没有提供HTML表单，因此我做了以下工作：

<form id="myForm">
    <input type="text" id="Textfield1" name="Textfield1" />
    <input type="text" id="Textfield2" name="Textfield2" />
    <input type="checkbox" id="Checkbox1" name="Checkbox1" />
    <select id="Select1" name="Select1">
        <option value="1">Option 1</option>
        <option value="2" selected>Option 2</option>
    </select>
</form>

我们在

xmlhttp.open

方法中使用

POST

而不是

GET

我们发送参数就像您在GET中所做的那样，但是我已经通过一个循环自动化了表单的序列化

---

这实际上非常简单，您只需在文档中使用一个带有

name

属性的iframe，然后就可以将表单上的

目标设置为相同的值。
当您提交表单时，它将以iframe为目标

如果希望表单返回某些内容，它可以返回使用
parent.doSomething
访问父级的javascript（只要它们位于同一个域上）.
你能给我们看一下发送GET请求的代码吗？@EisaAdil:你可以选择不使用jQuery。在jQuery中可以做的任何事情都可以在普通的JS中完成。你说，“我试图使用带有URL的
xmlhttp请求（GET）
”。你能给我们看一下你尝试过的代码吗？作为回报，我们将向你展示如何为一个

POST`请求修改它。你也能给我们展示一下

HTML

表单吗？@ggzone OP明确表示没有jQuery…这基本上就是AJAX文件上传在旧浏览器中的工作方式，但我不建议这样做，除非这是你的目标。

XmlHttpRequest

为处理AJAX提供了更好的界面。好的，非常感谢！！：）可以使用了吗？：）所以我可以在php上使用

$\u POST['Textfield']

？它不起作用。第10行的C:\xampp\htdocs\update\u article.php中显示了

未定义的索引：e\u art\u名称。我使用了
$art=$\u POST['e\u art\u name']和按钮的

<form id="myForm">
    <input type="text" id="Textfield1" name="Textfield1" />
    <input type="text" id="Textfield2" name="Textfield2" />
    <input type="checkbox" id="Checkbox1" name="Checkbox1" />
    <select id="Select1" name="Select1">
        <option value="1">Option 1</option>
        <option value="2" selected>Option 2</option>
    </select>
</form>

function postForm(form) {
    var xmlhttp = null,
        data = '';

    for (var i = 0; i < form.elements.length; i++) {
        data += '&' + encodeURIComponent(form.elements[i].id) + '=' + encodeURIComponent(form.elements[i].value);
    }

    data = data.substr(1); //Get rid of the first character.

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystate = function() { alert(msg); }

    xmlhttp.open("POST", "insert.php", true);
    xmlhttp.send(data); //Send your data in the send method.
}

postForm(document.getElementById('myForm'));