POST表单没有重定向

时间:2014-01-08 17:07:00

标签: javascript ajax post xmlhttprequest

我想将post表单的数据发送到将进行数据库查询的页面。

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

我尝试使用带有网址的xmlhttp-request (GET),但由于有很多表单字段可以输入几个文本句子,因此网址会超长。

我也听说过“POST”xmlhttp-request,但我没有找到一个很好的教程和一个有效的例子。

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

有人知道如何做到这一点,或者xmlhttp帖子是如何工作的?

以下是我用于GET的代码:(但我不想执行var ID1 = ...部分。我想通过$_POST像常规{{1}获取值}}

submit

HTML

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();
}

2 个答案:

答案 0 :(得分:0)

发送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>

我还重构了你的doGET方法,将其重命名为postForm,它接受​​一个表单元素作为参数。

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'));
  1. 我们在POST方法中使用GET代替xmlhttp.open
  2. 我们像在GET中一样发送参数,但我已经通过循环自动化了表单的序列化。

答案 1 :(得分:0)

这实际上非常简单,您只需要在文档中使用name属性的iframe,然后就可以将表单上的target设置为相同的值。 当您提交表单时,它将以iframe为目标。

如果您希望表单返回某些内容,则可以返回使用parent.doSomething访问父级的javascript(只要它们位于同一个域中)。