Envío de formulario HTML usando Jquery AJAX

107

Estoy tratando de enviar un formulario HTML usando AJAX usando este ejemplo .

Mi código HTML:

<form id="formoid" action="studentFormInsert.php" title="" method="post">
    <div>
        <label class="title">First Name</label>
        <input type="text" id="name" name="name" >
    </div>
    <div>
        <label class="title">Name</label>
        <input type="text" id="name2" name="name2" >
    </div>
    <div>
        <input type="submit" id="submitButton"  name="submitButton" value="Submit">
    </div>
</form>

Mi guión:

<script type="text/javascript">
    $(document).ready(function() { 
        $('#formoid').ajaxForm(function() { 
            alert("Thank you for your comment!"); 
        }); 
    });
</script>

Esto no funciona, ni siquiera recibo el mensaje de alerta y cuando envío no quiero redirigir a otra página, solo quiero mostrar el mensaje de alerta.

¿Existe una forma sencilla de hacerlo?

PD: Tengo varios campos, acabo de poner dos como ejemplo.

jquery ajax form-submit Oliveira
fuente

¿No puedes eliminar el componente html "formulario"? y use jquery para publicar en el controlador de clic del botón

Come

Respuestas:

177

Descripción rápida de AJAX

AJAX es simplemente JSON asíncrono o XML (en la mayoría de las situaciones más nuevas, JSON). Debido a que estamos realizando una tarea ASYNC, es probable que proporcionemos a nuestros usuarios una experiencia de interfaz de usuario más agradable. En este caso específico, estamos haciendo un envío de FORMULARIO usando AJAX.

Muy rápido, hay 4 Web acciones generales GET, POST, PUT, y DELETE; éstos corresponden directamente con SELECT/Retreiving DATA, INSERTING DATA, UPDATING/UPSERTING DATA, y DELETING DATA. Un formulario web HTML / ASP.Net / PHP / Python predeterminado o cualquier otra formacción es "enviar", que es una acción POST. Debido a esto, a continuación se describe cómo hacer una POST. A veces, sin embargo, con http es posible que desee una acción diferente y probablemente desee utilizar .ajax.

Mi código específicamente para ti (descrito en los comentarios del código):

/* attach a submit handler to the form */
$("#formoid").submit(function(event) {

  /* stop form from submitting normally */
  event.preventDefault();

  /* get the action attribute from the <form action=""> element */
  var $form = $(this),
    url = $form.attr('action');

  /* Send the data using post with element id name and name2*/
  var posting = $.post(url, {
    name: $('#name').val(),
    name2: $('#name2').val()
  });

  /* Alerts the results */
  posting.done(function(data) {
    $('#result').text('success');
  });
  posting.fail(function() {
    $('#result').text('failed');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="formoid" action="studentFormInsert.php" title="" method="post">
  <div>
    <label class="title">First Name</label>
    <input type="text" id="name" name="name">
  </div>
  <div>
    <label class="title">Last Name</label>
    <input type="text" id="name2" name="name2">
  </div>
  <div>
    <input type="submit" id="submitButton" name="submitButton" value="Submit">
  </div>
</form>

<div id="result"></div>

Expandir fragmento

Documentación

De la $.postdocumentación del sitio web de jQuery .

Ejemplo : enviar datos de formulario mediante solicitudes ajax

$.post("test.php", $("#testform").serialize());

Ejemplo : publicar un formulario usando ajax y poner los resultados en un div

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>
        <form action="/" id="searchForm">
            <input type="text" name="s" placeholder="Search..." />
            <input type="submit" value="Search" />
        </form>
        <!-- the result of the search will be rendered inside this div -->
        <div id="result"></div>
        <script>
            /* attach a submit handler to the form */
            $("#searchForm").submit(function(event) {

                /* stop form from submitting normally */
                event.preventDefault();

                /* get some values from elements on the page: */
                var $form = $(this),
                    term = $form.find('input[name="s"]').val(),
                    url = $form.attr('action');

                /* Send the data using post */
                var posting = $.post(url, {
                    s: term
                });

                /* Put the results in a div */
                posting.done(function(data) {
                    var content = $(data).find('#content');
                    $("#result").empty().append(content);
                });
            });
        </script>
    </body>
</html>

Nota IMPORTANTE

Sin usar OAuth o HTTPS (TLS / SSL) como mínimo, no use este método para datos seguros (números de tarjetas de crédito, SSN, cualquier cosa que sea PCI, HIPAA o relacionada con el inicio de sesión)

abc123
fuente

@ abc123 ¿cómo puedo configurar el encabezado de solicitud de autorización en esto? Lo intenté,

beforeSend: function (xhr) 			{ 				xhr.setRequestHeader("Authorization", "*****"); 				xhr.setRequestHeader("contentType", "application/json;charset=UTF-8"); 			},

pero esto no establece ningún encabezado

mahendra kawde

@mahendrakawde necesitaría utilizar $.ajaxlo que puedo escribir un ejemplo si lo desea, pero esa es realmente una pregunta separada

abc123

@ abc123 tengo un hilo iniciado para eso. Permítanme compartir con ustedes.

mahendra kawde

¿Podemos evitar usar la publicación de formulario en absoluto y simplemente hacer una publicación de jquery en el controlador de clic de un botón (que es un botón html que no forma parte de ningún formulario div)? ¿De esta manera event.preventdefault tampoco será necesario?

harshvchawla

@harshvchawla, por supuesto, pero luego su consulta de selección para las variables extraídas del elemento html es diferente

abc123

var postData = "text";
      $.ajax({
            type: "post",
            url: "url",
            data: postData,
            contentType: "application/x-www-form-urlencoded",
            success: function(responseData, textStatus, jqXHR) {
                alert("data saved")
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(errorThrown);
            }
        })

Varun S
fuente

La función de éxito / finalización sucederá cuando se complete la llamada y reciba un 200 OK del servidor

Varun S

hola puse: $ (documento) .ready (function () {$ ('# formoid'). submit (function () {var postData = "text"; $ .ajax ({type: "post", url: " url ", data: postData, contentType:" studentFormInsert.php ", success: function (responseData, textStatus, jqXHR) {alerta (" datos guardados ")}, error: function (jqXHR, textStatus, errorThrown) {console.log ( errorThrown);}})}); en realidad no funciona ... ¿se necesita alguna modificación en el lado de php?

Oliveira

Buen ejemplo y bien escrito, publique alguna respuesta con él, aunque no solo un código de ejemplo sin explicación.

abc123

No sé cómo conectar eso con el formulario que deseo publicar

Piotr Kamoda

¿Por qué no hay explicación?

Rich

Si agrega:

jquery.form.min.js

Simplemente puede hacer esto:

<script>
$('#myform').ajaxForm(function(response) {
  alert(response);
});

// this will register the AJAX for <form id="myform" action="some_url">
// and when you submit the form using <button type="submit"> or $('myform').submit(), then it will send your request and alert response
</script>

NOTA:

Puede usar $ ('FORM'). Serialize () simple como se sugiere en la publicación anterior, pero eso no funcionará para FILE INPUTS ... ajaxForm () lo hará.

Martín Zvarík
fuente