php - por - ¿Cómo evitar las variables URL $_GET después de enviar un formulario con ajax?

pasar variables por url php post

Question

<form id=''gbookform''>
    <input id=''inputname'' type=''text'' name=''name'' autocomplete=''off'' placeholder=''Your name''>
    <input id=''inputcon'' type=''text'' name=''contact'' autocomplete=''off'' placeholder=''Your contact or website''>
    <div id=''forminfo''></div>
    <textarea id=''inputstory'' name=''story'' rows=''9'' placeholder=''Your story''></textarea>
    <div class="g-recaptcha" data-sitekey="6LfobygTAAAAACxBzCl1FxPe4lALE-669wt6NC7G"></div>
    <input id=''btnsubmit'' type=''submit'' value=''SEND''>
</form>

JS

$("#gbookform").submit(function(e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "gbookajax.php",
        data: $(this).serialize(),
        success: function(data) {
            $(''#dataload'').load(''gbookdata.php'');
            $(''#forminfo'').text(data).show();
        }
    })
})

Después de enviar el formulario, veo mis variables escritas dentro de url:
http://localhost/gbook.php?name=q&contact=q&story=q&g-recaptcha-response=

¿Cómo puedo evitar esto?

Answer 1

No estoy seguro de si desea enviar el formulario como GET, pero suprima las variables que se muestran en su enlace o si desea enviar una solicitud POST. De acuerdo con el JS que me proporcionó, asumí que desea enviar una solicitud POST, así que creo que esto debería funcionar para usted.

<form id=''gbookform'' method="post">
...
</form>

Observe la diferencia en la primera línea de código, donde se agrega el método. El método predeterminado para la forma es GET, por lo que se trató como tal.

// EDITAR Dado que está intentando enviar una solicitud posterior, también debe suprimir la funcionalidad básica de los botones para enviar la solicitud y actualizar la página. Entonces, para su JS probablemente debería agregar esto ...

$("#gbookform").submit(function(e) {
e.preventDefault();
$.ajax({
    type: "POST",
    url: "gbookajax.php",
    data: $(this).serialize(),
    success: function(data) {
        $(''#dataload'').load(''gbookdata.php'');
        $(''#forminfo'').text(data).show();
    }
})
return false;

})

Answer 2

Solo especifique el método de formulario:

<form id=''gbookform'' method=''post''>...</form>

Answer 3

Tu ajax no está funcionando. el nombre del archivo en

http://localhost/gbook.php?name=q&contact=q&story=q&g-recaptcha-response=

es diferente de

url: "gbookajax.php",

así que creo que el formulario se publica de la manera habitual, y no el ajax. lo que puedes hacer es poner

$("#btnsubmit").submit(function(e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "gbookajax.php",
        data: $(this).serialize(),
        success: function(data) {
            $(''#dataload'').load(''gbookdata.php'');
            $(''#forminfo'').text(data).show();
        }
    })
})

en una función, como:

function postForm(){
    ...// the ajax request above
}

y agregar reemplazar:

<input id=''btnsubmit'' type=''submit'' value=''SEND''>

con

<button onclick="postForm()">SEND</button>