没有重定向的POST表单

Question

I would like to post a form's data to the page where the database-query will be made.

But I don't want like in normal cases where a new page opens up, or the site gets redirected. It should be something like a "hidden" post.

I tried to use a xmlhttp-request (GET) with a URL, but since there are a lot of form-fields where you can enter a few sentences of text, the URL gets super long.

I also heard about the "POST" xmlhttp-request, but I haven't found a good tutorial with a working example.

I don't want to use jQuery or anything like that.

Does anybody know how to do this, or how xmlhttp post works?

Here is the code I used for GET: (BUT I would like to not do the var ID1 = ... part. I want to just get the values by $_POST like a regular submit.

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

<div>    
     <p> TEXT1 </p>     
     <Input type="TextBox" id="Textfiel1">    
     <br>
     <p> TEXT2 </p>
     <Input type="TextBox" id="Textfield2">
     <br>
     <p> Checkbox 1</p>    
     <Input type="Checkbox" id="checkbox1">
     <br>
     <Label onclick="doGET()"> Click </Label>
</div>

Answer 1

Sending a POST request is not much different than sending a GET. There are two key differences, though, that I will point out below:

Since you didn't supply an HTML form to work with, I made the following below:

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

I also refactored your doGET method, renaming it postForm which accepts a form element as an argument.

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. We use POST instead of GET in the xmlhttp.open method.
2. We send the parameters just like you did in the GET, but I have automated the serialization of the form with a loop.