Ejemplo de POST de jQuery Ajax con PHP

Estoy intentando enviar datos desde un formulario a una base de datos. Aquí está el formulario que estoy usando:

<form name="foo" action="form.php" method="POST" id="foo">
    <label for="bar">A bar</label>
    <input id="bar" name="bar" type="text" value="" />
    <input type="submit" value="Send" />
</form>

El enfoque típico sería enviar el formulario, pero esto hace que el navegador redirija. Usando jQuery y Ajax, ¿es posible capturar todos los datos del formulario y enviarlos a un script PHP (un ejemplo, formulario.php)?

preguntado el 15 de febrero de 11 a las 10:02

Vea meta discusión relacionada por razonar detrás de la recuperación. -

Solución simple de vainilla js: stackoverflow.com/a/57285063/7910454 -

17 Respuestas

Uso básico de .ajax se vería algo como esto:

HTML:

<form id="foo">
    <label for="bar">A bar</label>
    <input id="bar" name="bar" type="text" value="" />

    <input type="submit" value="Send" />
</form>

jQuery:

// Variable to hold request
var request;

// Bind to the submit event of our form
$("#foo").submit(function(event){

    // Prevent default posting of form - put here to work in case of errors
    event.preventDefault();

    // Abort any pending request
    if (request) {
        request.abort();
    }
    // setup some local variables
    var $form = $(this);

    // Let's select and cache all the fields
    var $inputs = $form.find("input, select, button, textarea");

    // Serialize the data in the form
    var serializedData = $form.serialize();

    // Let's disable the inputs for the duration of the Ajax request.
    // Note: we disable elements AFTER the form data has been serialized.
    // Disabled form elements will not be serialized.
    $inputs.prop("disabled", true);

    // Fire off the request to /form.php
    request = $.ajax({
        url: "/form.php",
        type: "post",
        data: serializedData
    });

    // Callback handler that will be called on success
    request.done(function (response, textStatus, jqXHR){
        // Log a message to the console
        console.log("Hooray, it worked!");
    });

    // Callback handler that will be called on failure
    request.fail(function (jqXHR, textStatus, errorThrown){
        // Log the error to the console
        console.error(
            "The following error occurred: "+
            textStatus, errorThrown
        );
    });

    // Callback handler that will be called regardless
    // if the request failed or succeeded
    request.always(function () {
        // Reenable the inputs
        $inputs.prop("disabled", false);
    });

});

Nota: Desde jQuery 1.8, .success(), .error() y .complete() están en desuso a favor de .done(), .fail() y .always().

Nota: recuerde que el fragmento anterior debe realizarse después de que DOM esté listo, por lo que debe colocarlo dentro de un $(document).ready() manejador (o use el $() taquigrafía).

Consejo: puedes cadena los controladores de devolución de llamada como este: $.ajax().done().fail().always();

PHP (es decir, form.php):

// You can access the values posted by jQuery.ajax
// through the global variable $_POST, like this:
$bar = isset($_POST['bar']) ? $_POST['bar'] : null;

Nota: siempre desinfectar los datos publicados, para evitar inyecciones y otros códigos maliciosos.

También puedes usar la taquigrafía .post en lugar de .ajax en el código JavaScript anterior:

$.post('/form.php', serializedData, function(response) {
    // Log the response to the console
    console.log("Response: "+response);
});

Nota: El código JavaScript anterior está diseñado para funcionar con jQuery 1.8 y versiones posteriores, pero debería funcionar con versiones anteriores hasta jQuery 1.5.

Respondido 12 Jul 19, 18:07

Editó su respuesta para corregir un error: request fue declarado como un var local haciendo if (request) request.abort(); Nunca funciona. - Andrey Mikhaylov - lolmaus

Una nota MUY IMPORTANTE, porque pasé / desperdicié / invertí mucho tiempo tratando de usar este ejemplo. Debe vincular el evento dentro de un bloque $ (document) .ready O tener el FORM cargado antes de que se ejecute la vinculación. De lo contrario, pasará mucho tiempo tratando de averiguar POR QUÉ diablos no se llama la unión. - Philibert Perusse

@PhilibertPerusse Al igual que con cualquier enlace de eventos, obviamente necesita que el elemento exista en el DOM antes de intentar enlazarlo, o si usa un enlace delegado. - mekwall

Sí, lo entiendo ahora. Pero encontré muchos ejemplos que siempre colocan un bloque $ (document) .ready para que el ejemplo sea autónomo. Escribí el comentario para un futuro usuario que puede, como yo, tropezar con esto y terminar leyendo el hilo de comentarios y este 'consejo' para principiantes: Philibert Perusse

Si está aplicando esto a su propio código, tenga en cuenta que los atributos de 'nombre' son críticos para las entradas de lo contrario serialize() los omitirá. - ben flynn

Para realizar una solicitud Ajax usando jQuery puede hacer esto con el siguiente código.

HTML:

<form id="foo">
    <label for="bar">A bar</label>
    <input id="bar" name="bar" type="text" value="" />
    <input type="submit" value="Send" />
</form>

<!-- The result of the search will be rendered inside this div -->
<div id="result"></div>

JavaScript:

Método 1

 /* Get from elements values */
 var values = $(this).serialize();

 $.ajax({
        url: "test.php",
        type: "post",
        data: values ,
        success: function (response) {

           // You will get response from your PHP page (what you echo or print)
        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus, errorThrown);
        }
    });

Método 2

/* Attach a submit handler to the form */
$("#foo").submit(function(event) {
    var ajaxRequest;

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

    /* Clear result div*/
    $("#result").html('');

    /* Get from elements values */
    var values = $(this).serialize();

    /* Send the data using post and put the results in a div. */
    /* I am not aborting the previous request, because it's an
       asynchronous request, meaning once it's sent it's out
       there. But in case you want to abort it you can do it
       by abort(). jQuery Ajax methods return an XMLHttpRequest
       object, so you can just use abort(). */
       ajaxRequest= $.ajax({
            url: "test.php",
            type: "post",
            data: values
        });

    /*  Request can be aborted by ajaxRequest.abort() */

    ajaxRequest.done(function (response, textStatus, jqXHR){

         // Show successfully for submit message
         $("#result").html('Submitted successfully');
    });

    /* On failure of request this function will be called  */
    ajaxRequest.fail(function (){

        // Show error
        $("#result").html('There is error while submit');
    });

La .success(), .error()y .complete() las devoluciones de llamada están obsoletas a partir de jQuery 1.8. Para preparar su código para su eventual eliminación, utilice .done(), .fail()y .always() preferiblemente.

MDN: abort() . Si la solicitud ya se ha enviado, este método cancelará la solicitud.

Así que hemos enviado con éxito una solicitud Ajax, y ahora es el momento de capturar los datos en el servidor.

PHP

Cuando hacemos una solicitud POST en una llamada Ajax (type: "post"), ahora podemos capturar datos usando $_REQUEST or $_POST:

  $bar = $_POST['bar']

También puede ver lo que obtiene en la solicitud POST simplemente. Por cierto, asegúrese de que $_POST Está establecido. De lo contrario, obtendrá un error.

var_dump($_POST);
// Or
print_r($_POST);

Y está insertando un valor en la base de datos. Asegúrate de estar sensibilizante or escapar Todas las solicitudes (ya sea que haya realizado un GET o POST) correctamente antes de realizar la consulta. Lo mejor sería usar declaraciones preparadas.

Y si desea devolver cualquier dato a la página, puede hacerlo simplemente haciendo eco de esos datos como se muestra a continuación.

// 1. Without JSON
   echo "Hello, this is one"

// 2. By JSON. Then here is where I want to send a value back to the success of the Ajax below
echo json_encode(array('returned_val' => 'yoho'));

Y luego puedes conseguirlo como:

 ajaxRequest.done(function (response){
    alert(response);
 });

Hay un par de métodos taquigráficos. Puede utilizar el siguiente código. Hace el mismo trabajo.

var ajaxRequest= $.post("test.php", values, function(data) {
  alert(data);
})
  .fail(function() {
    alert("error");
  })
  .always(function() {
    alert("finished");
});

Respondido 12 Jul 19, 19:07

@Clarence bar es el nombre del texto del tipo de entrada y, como estoy demandando el método de publicación, $ _POST ['bar'] se usa para obtener su valor - NullPoièteя

Para cualquiera que quiera usar json, mientras usa JSON, la llamada debe contener el parámetro dataType: 'json' - K. Kilian Lindberg

@CarlLindberg: ¿Qué sucede si desea que jQuery adivine en función del tipo MIME de la respuesta (que es lo que debe hacer cuando no establece el dataType), de modo que potencialmente pueda aceptar JSON or algún otro formato? - nnnnnn

@nnnnnn tienes razón, eso es mucho mejor, de hecho, es el valor predeterminado: Intelligent Guess - K. Kilian Lindberg

Para acceder al objeto de respuesta JSON (data.returned_val), no olvide incluir dataType: "json" en su llamada ajax original - Adelmar

Me gustaría compartir una forma detallada de cómo publicar con PHP + Ajax junto con los errores devueltos en caso de falla.

En primer lugar, cree dos archivos, por ejemplo form.php y process.php.

Primero crearemos un form que luego se enviará utilizando el jQuery .ajax() método. El resto se explicará en los comentarios.


form.php

<form method="post" name="postForm">
    <ul>
        <li>
            <label>Name</label>
            <input type="text" name="name" id="name" placeholder="Bruce Wayne">
            <span class="throw_error"></span>
            <span id="success"></span>
       </li>
   </ul>
   <input type="submit" value="Send" />
</form>


Valide el formulario utilizando la validación del lado del cliente jQuery y pase los datos a process.php.

$(document).ready(function() {
    $('form').submit(function(event) { //Trigger on form submit
        $('#name + .throw_error').empty(); //Clear the messages first
        $('#success').empty();

        //Validate fields if required using jQuery

        var postForm = { //Fetch form data
            'name'     : $('input[name=name]').val() //Store name fields value
        };

        $.ajax({ //Process the form using $.ajax()
            type      : 'POST', //Method type
            url       : 'process.php', //Your form processing file URL
            data      : postForm, //Forms name
            dataType  : 'json',
            success   : function(data) {
                            if (!data.success) { //If fails
                                if (data.errors.name) { //Returned if any error from process.php
                                    $('.throw_error').fadeIn(1000).html(data.errors.name); //Throw relevant error
                                }
                            }
                            else {
                                    $('#success').fadeIn(1000).append('<p>' + data.posted + '</p>'); //If successful, than throw a success message
                                }
                            }
        });
        event.preventDefault(); //Prevent the default submit
    });
});

Ahora echaremos un vistazo a process.php

$errors = array(); //To store errors
$form_data = array(); //Pass back the data to `form.php`

/* Validate the form on the server side */
if (empty($_POST['name'])) { //Name cannot be empty
    $errors['name'] = 'Name cannot be blank';
}

if (!empty($errors)) { //If errors in validation
    $form_data['success'] = false;
    $form_data['errors']  = $errors;
}
else { //If not, process the form, and return true on success
    $form_data['success'] = true;
    $form_data['posted'] = 'Data Was Posted Successfully';
}

//Return the data back to form.php
echo json_encode($form_data);

Los archivos del proyecto se pueden descargar desde http://projects.decodingweb.com/simple_ajax_form.zip.

contestado el 01 de mayo de 18 a las 08:05

Puede usar serializar. A continuación se muestra un ejemplo.

$("#submit_btn").click(function(){
    $('.error_status').html();
        if($("form#frm_message_board").valid())
        {
            $.ajax({
                type: "POST",
                url: "<?php echo site_url('message_board/add');?>",
                data: $('#frm_message_board').serialize(),
                success: function(msg) {
                    var msg = $.parseJSON(msg);
                    if(msg.success=='yes')
                    {
                        return true;
                    }
                    else
                    {
                        alert('Server error');
                        return false;
                    }
                }
            });
        }
        return false;
    });

Respondido 19 Jul 14, 22:07

$.parseJSON() es un salvavidas total, gracias. Tenía problemas para interpretar mi salida en función de las otras respuestas. - El mono sediento

HTML:

    <form name="foo" action="form.php" method="POST" id="foo">
        <label for="bar">A bar</label>
        <input id="bar" class="inputs" name="bar" type="text" value="" />
        <input type="submit" value="Send" onclick="submitform(); return false;" />
    </form>

JavaScript:

   function submitform()
   {
       var inputs = document.getElementsByClassName("inputs");
       var formdata = new FormData();
       for(var i=0; i<inputs.length; i++)
       {
           formdata.append(inputs[i].name, inputs[i].value);
       }
       var xmlhttp;
       if(window.XMLHttpRequest)
       {
           xmlhttp = new XMLHttpRequest;
       }
       else
       {
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
       }
       xmlhttp.onreadystatechange = function()
       {
          if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
          {

          }
       }
       xmlhttp.open("POST", "insert.php");
       xmlhttp.send(formdata);
   }

Respondido 12 Jul 19, 19:07

código javascript puro. Gracias. - Programador gris

Utilizo la forma que se muestra a continuación. Envía todo como archivos.

$(document).on("submit", "form", function(event)
{
    event.preventDefault();

    var url  = $(this).attr("action");
    $.ajax({
        url: url,
        type: 'POST',
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status)
        {

        },
        error: function (xhr, desc, err)
        {
            console.log("error");
        }
    });
});

Respondido 12 Jul 19, 19:07

Si desea enviar datos usando jQuery Ajax, entonces no es necesario la etiqueta de formulario y el botón de envío

Ejemplo:

<script>
    $(document).ready(function () {
        $("#btnSend").click(function () {
            $.ajax({
                url: 'process.php',
                type: 'POST',
                data: {bar: $("#bar").val()},
                success: function (result) {
                    alert('success');
                }
            });
        });
    });
</script>

<label for="bar">A bar</label>
<input id="bar" name="bar" type="text" value="" />
<input id="btnSend" type="button" value="Send" />

Respondido 12 Jul 19, 19:07

<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<form method="post" id="form_content" action="Javascript:void(0);">
    <button id="desc" name="desc" value="desc" style="display:none;">desc</button>
    <button id="asc" name="asc"  value="asc">asc</button>
    <input type='hidden' id='check' value=''/>
</form>

<div id="demoajax"></div>

<script>
    numbers = '';
    $('#form_content button').click(function(){
        $('#form_content button').toggle();
        numbers = this.id;
        function_two(numbers);
    });

    function function_two(numbers){
        if (numbers === '')
        {
            $('#check').val("asc");
        }
        else
        {
            $('#check').val(numbers);
        }
        //alert(sort_var);

        $.ajax({
            url: 'test.php',
            type: 'POST',
            data: $('#form_content').serialize(),
            success: function(data){
                $('#demoajax').show();
                $('#demoajax').html(data);
                }
        });

        return false;
    }
    $(document).ready(function_two());
</script>

respondido 22 nov., 14:11

¿Qué diferencia de identificación entre la tuya y la otra respuesta? - NullPoièteя

es publicado por mí, otros son por otros. - John

En su archivo php ingrese:

$content_raw = file_get_contents("php://input"); // THIS IS WHAT YOU NEED
$decoded_data = json_decode($content_raw, true); // THIS IS WHAT YOU NEED
$bar = $decoded_data['bar']; // THIS IS WHAT YOU NEED
$time = $decoded_data['time'];
$hash = $decoded_data['hash'];
echo "You have sent a POST request containing the bar variable with the value $bar";

y en su archivo js envíe un ajax con el objeto de datos

var data = { 
    bar : 'bar value',
    time: calculatedTimeStamp,
    hash: calculatedHash,
    uid: userID,
    sid: sessionID,
    iid: itemID
};

$.ajax({
    method: 'POST',
    crossDomain: true,
    dataType: 'json',
    crossOrigin: true,
    async: true,
    contentType: 'application/json',
    data: data,
    headers: {
        'Access-Control-Allow-Methods': '*',
        "Access-Control-Allow-Credentials": true,
        "Access-Control-Allow-Headers" : "Access-Control-Allow-Headers, Origin, X-Requested-With, Content-Type, Accept, Authorization",
        "Access-Control-Allow-Origin": "*",
        "Control-Allow-Origin": "*",
        "cache-control": "no-cache",
        'Content-Type': 'application/json'
    },
    url: 'https://yoururl.com/somephpfile.php',
    success: function(response){
        console.log("Respond was: ", response);
    },
    error: function (request, status, error) {
        console.log("There was an error: ", request.responseText);
    }
  })

o manténgalo como está con el formulario de envío. Solo necesita esto si desea enviar una solicitud modificada con contenido adicional calculado y no solo algunos datos del formulario, que ingresa el cliente. Por ejemplo, un hash, una marca de tiempo, un ID de usuario, un ID de sesión y similares.

Respondido 24 Abr '20, 00:04

El manejo de los errores de Ajax y el cargador antes del envío y después del envío exitoso muestra un cuadro de inicio de alerta con un ejemplo:

var formData = formData;

$.ajax({
    type: "POST",
    url: url,
    async: false,
    data: formData, // Only input
    processData: false,
    contentType: false,
    xhr: function ()
    {
        $("#load_consulting").show();
        var xhr = new window.XMLHttpRequest();

        // Upload progress
        xhr.upload.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                var percentComplete = (evt.loaded / evt.total) * 100;
                $('#addLoad .progress-bar').css('width', percentComplete + '%');
            }
        }, false);

        // Download progress
        xhr.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
            }
        }, false);
        return xhr;
    },
    beforeSend: function (xhr) {
        qyuraLoader.startLoader();
    },
    success: function (response, textStatus, jqXHR) {
        qyuraLoader.stopLoader();
        try {
            $("#load_consulting").hide();

            var data = $.parseJSON(response);
            if (data.status == 0)
            {
                if (data.isAlive)
                {
                    $('#addLoad .progress-bar').css('width', '00%');
                    console.log(data.errors);
                    $.each(data.errors, function (index, value) {
                        if (typeof data.custom == 'undefined') {
                            $('#err_' + index).html(value);
                        }
                        else
                        {
                            $('#err_' + index).addClass('error');

                            if (index == 'TopError')
                            {
                                $('#er_' + index).html(value);
                            }
                            else {
                                $('#er_TopError').append('<p>' + value + '</p>');
                            }
                        }
                    });
                    if (data.errors.TopError) {
                        $('#er_TopError').show();
                        $('#er_TopError').html(data.errors.TopError);
                        setTimeout(function () {
                            $('#er_TopError').hide(5000);
                            $('#er_TopError').html('');
                        }, 5000);
                    }
                }
                else
                {
                    $('#headLogin').html(data.loginMod);
                }
            } else {
                //document.getElementById("setData").reset();
                $('#myModal').modal('hide');
                $('#successTop').show();
                $('#successTop').html(data.msg);
                if (data.msg != '' && data.msg != "undefined") {

                    bootbox.alert({closeButton: false, message: data.msg, callback: function () {
                            if (data.url) {
                                window.location.href = '<?php echo site_url() ?>' + '/' + data.url;
                            } else {
                                location.reload(true);
                            }
                        }});
                } else {
                    bootbox.alert({closeButton: false, message: "Success", callback: function () {
                        if (data.url) {
                            window.location.href = '<?php echo site_url() ?>' + '/' + data.url;
                        } else {
                            location.reload(true);
                        }
                    }});
                }

            }
        }
        catch (e) {
            if (e) {
                $('#er_TopError').show();
                $('#er_TopError').html(e);
                setTimeout(function () {
                    $('#er_TopError').hide(5000);
                    $('#er_TopError').html('');
                }, 5000);
            }
        }
    }
});

Respondido 12 Jul 19, 19:07

Estoy usando este código simple de una línea durante años sin ningún problema (requiere jQuery):

<script src="http://malsup.github.com/jquery.form.js"></script> 
<script type="text/javascript">
    function ap(x,y) {$("#" + y).load(x);};
    function af(x,y) {$("#" + x ).ajaxSubmit({target: '#' + y});return false;};
</script>

Aquí ap () significa una página Ajax y af () significa una forma Ajax. En un formulario, simplemente llamar a la función af () publicará el formulario en la URL y cargará la respuesta en el elemento HTML deseado.

<form id="form_id">
    ...
    <input type="button" onclick="af('form_id','load_response_id')"/>
</form>
<div id="load_response_id">this is where response will be loaded</div>

respondido 03 mar '20, 20:03

¡Ojalá incluyeras el archivo del servidor! No tengo idea de cómo probar. - johny por qué

Desde la introducción de la Fetch API Realmente ya no hay razón para hacer esto con jQuery Ajax o XMLHttpRequests. Para PUBLICAR datos de formulario en un script PHP en JavaScript vanilla, puede hacer lo siguiente:

function postData() {
    const form = document.getElementById('form');
    const data = new FormData();
    data.append('name', form.name.value);

    fetch('../php/contact.php', {method: 'POST', body: data}).then(response => {
        if (!response.ok){
            throw new Error('Network response was not ok.');
        }
    }).catch(err => console.log(err));
}
<form id="form" action="javascript:postData()">
    <input id="name" name="name" placeholder="Name" type="text" required>
    <input type="submit" value="Submit">
</form>

Aquí hay un ejemplo muy básico de un script PHP que toma los datos y envía un correo electrónico:

<?php
    header('Content-type: text/html; charset=utf-8');

    if (isset($_POST['name'])) {
        $name = $_POST['name'];
    }

    $to = "test@example.com";
    $subject = "New name submitted";
    $body = "You received the following name: $name";

    mail($to, $subject, $body);

Respondido el 12 de enero de 20 a las 18:01

El soporte de Internet Explorer podría ser una razón para seguir usando jQuery AJAX - huub s

@HuubS ¿Por qué? Solo usa un polyfill. jQuery está muerto en mi humilde opinión. - Leonheess

Por favor, chequee esto. Es el código de solicitud Ajax completo.

$('#foo').submit(function(event) {
    // Get the form data
    // There are many ways to get this data using jQuery (you
    // can use the class or id also)
    var formData = $('#foo').serialize();
    var url = 'URL of the request';

    // Process the form.
    $.ajax({
        type        : 'POST',   // Define the type of HTTP verb we want to use
        url         : 'url/',   // The URL where we want to POST
        data        : formData, // Our data object
        dataType    : 'json',   // What type of data do we expect back.
        beforeSend : function() {

            // This will run before sending an Ajax request.
            // Do whatever activity you want, like show loaded.
        },
        success:function(response){
            var obj = eval(response);
            if(obj)
            {
                if(obj.error==0){
                    alert('success');
                }
                else{
                    alert('error');
                }
            }
        },
        complete : function() {
            // This will run after sending an Ajax complete
        },
        error:function (xhr, ajaxOptions, thrownError){
            alert('error occured');
            // If any error occurs in request
        }
    });

    // Stop the form from submitting the normal way
    // and refreshing the page
    event.preventDefault();
});

Respondido 12 Jul 19, 19:07

Esto es lo que busco. - Nirav Bhoi

Es un muy buen articulo que contiene todo lo que necesita saber sobre el envío de formularios jQuery.

Resumen del artículo:

Envío de formulario HTML simple

HTML:

<form action="path/to/server/script" method="post" id="my_form">
    <label>Name</label>
    <input type="text" name="name" />
    <label>Email</label>
    <input type="email" name="email" />
    <label>Website</label>
    <input type="url" name="website" />
    <input type="submit" name="submit" value="Submit Form" />
    <div id="server-results"><!-- For server results --></div>
</form>

JavaScript:

$("#my_form").submit(function(event){
    event.preventDefault(); // Prevent default action
    var post_url = $(this).attr("action"); // Get the form action URL
    var request_method = $(this).attr("method"); // Get form GET/POST method
    var form_data = $(this).serialize(); // Encode form elements for submission

    $.ajax({
        url : post_url,
        type: request_method,
        data : form_data
    }).done(function(response){ //
        $("#server-results").html(response);
    });
});

Envío de formulario HTML Multipart / form-data

Para cargar archivos al servidor, podemos usar la interfaz FormData disponible para XMLHttpRequest2, que construye un objeto FormData y se puede enviar al servidor fácilmente usando jQuery Ajax.

HTML:

<form action="path/to/server/script" method="post" id="my_form">
    <label>Name</label>
    <input type="text" name="name" />
    <label>Email</label>
    <input type="email" name="email" />
    <label>Website</label>
    <input type="url" name="website" />
    <input type="file" name="my_file[]" /> <!-- File Field Added -->
    <input type="submit" name="submit" value="Submit Form" />
    <div id="server-results"><!-- For server results --></div>
</form>

JavaScript:

$("#my_form").submit(function(event){
    event.preventDefault(); // Prevent default action
    var post_url = $(this).attr("action"); // Get form action URL
    var request_method = $(this).attr("method"); // Get form GET/POST method
    var form_data = new FormData(this); // Creates new FormData object
    $.ajax({
        url : post_url,
        type: request_method,
        data : form_data,
        contentType: false,
        cache: false,
        processData: false
    }).done(function(response){ //
        $("#server-results").html(response);
    });
});

Espero que esto ayude.

Respondido 12 Jul 19, 19:07

JS puro

En JS puro será mucho más sencillo

foo.onsubmit = e=> {
  e.preventDefault();
  fetch(foo.action,{method:'post', body: new FormData(foo)});
}

foo.onsubmit = e=> {
  e.preventDefault();
  fetch(foo.action,{method:'post', body: new FormData(foo)});
}
<form name="foo" action="form.php" method="POST" id="foo">
    <label for="bar">A bar</label>
    <input id="bar" name="bar" type="text" value="" />
    <input type="submit" value="Send" />
</form>

Respondido el 22 de junio de 20 a las 16:06

Me di cuenta de la pregunta que se hizo para jQuery, pero ¿crees que JS puro es mejor? Además, ¿esas respuestas que usan .ajax están desactualizadas? ¿Qué pasa con .post? ¿Y qué pasa con el lado del controlador? - mlestudiante33

@ webNoob13 Creo que el código JS puro y corto es mejor que usar una biblioteca externa (porque biblioteca = tiempo adicional para cargar la página). Por supuesto, si su biblioteca tiene una funcionalidad complicada como renderizar PDF o algo así, entonces es mejor usarla en lugar de implementar esa funcionalidad usted mismo en JS. Si utiliza fetch Creo que no debería haber ningún problema en el lado de PHP. También creo que jQuery es bastante antiguo y JS y los navegadores se han desarrollado mucho en los últimos años y puedes hacer muchas cosas de forma sencilla utilizando JS puro sin bibliotecas externas. - Kamil Kielczewski

Eso es lo que sigo leyendo, pero mi profesor insiste en jQuery. Pero, de nuevo, sigue enseñando BS3, no BS4. - mlestudiante33

Recibí un error ... foo no está definido .. :( - Pumayk26

Tengo otra idea.

Cuál es la URL de los archivos PHP que proporcionaron el archivo de descarga. Luego, debe disparar la misma URL a través de ajax y verifiqué que esta segunda solicitud solo da la respuesta después de que su primera solicitud complete el archivo de descarga. Para que pueda obtener el evento.

Está funcionando a través de ajax con la misma segunda solicitud.}

Respondido 24 Feb 21, 11:02

Ese es el código que llena un select option etiqueta en HTML usar ajax y XMLHttpRequest con API está escrito en PHP y PDO

conn.php

<?php
$servername = "localhost";
$username = "root";
$password = "root";
$database = "db_event";
try {
    $conn = new PDO("mysql:host=$servername;dbname=$database", $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    echo "Connection failed: " . $e->getMessage();
}
?>

category.php

<?php
 include 'conn.php';
try {
    $data = json_decode(file_get_contents("php://input"));
    $stmt = $conn->prepare("SELECT *  FROM events ");
    http_response_code(200);
    $stmt->execute();
    
    header('Content-Type: application/json');

    $arr=[];
    while($value=$stmt->fetch(PDO::FETCH_ASSOC)){
        array_push($arr,$value);
    }
    echo json_encode($arr);
   
  } catch(PDOException $e) {
    echo "Error: " . $e->getMessage();
  }

script.js

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        data = JSON.parse(this.responseText);

        for (let i in data) {


            $("#cars").append(
                '<option value="' + data[i].category + '">' + data[i].category + '</option>'

            )
        }
    }
};
xhttp.open("GET", "http://127.0.0.1:8000/category.php", true);
xhttp.send();

index.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <title>Document</title>
</head>

<body>
    <label for="cars">Choose a Category:</label>

    <select name="option" id="option">
        
    </select>
    
    <script src="script.js"></script>
</body>

</html>

respondido 25 mar '21, 03:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.