web-dev-qa-db-fra.com

Envoyer des données de formulaire avec jquery ajax json

Je suis nouveau dans PHP/jquery Je voudrais demander comment envoyer des données JSON à partir d'un champ de formulaire tel que (nom, âge, etc.) avec ajax au format json Malheureusement, je ne trouve aucune information pertinente sur ce sujet, il est même possible de le faire de manière dynamique? Les recherches Google ne donnent que des réponses, telles que la constitution manuelle des données. comme: name: X Y, age: 32, etc.

Y'a-t'il un quelconque moyen d'y arriver?

Merci pour l'aide!

Modifier:

<form action="test.php" method="post">
Name: <input type="text" name="name"><br>
Age: <input type="text" name="email"><br>
FavColor: <input type="text" name="favc"><br>
<input type="submit">
</form>
javascriptphpjqueryajaxjson
13
user1888798

voici un simple

voici mon test.php pour tester seulement

<?php

// this is just a test
//send back to the ajax request the request

echo json_encode($_POST);

voici mon index.html

<!DOCTYPE html>
<html>

<head>

</head>
<body>

<form id="form" action="" method="post">
Name: <input type="text" name="name"><br>
Age: <input type="text" name="email"><br>
FavColor: <input type="text" name="favc"><br>
<input id="submit" type="button" name="submit" value="submit">
</form>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        // click on button submit
        $("#submit").on('click', function(){
            // send ajax
            $.ajax({
                url: 'test.php', // url where to submit the request
                type : "POST", // type of action POST || GET
                dataType : 'json', // data type
                data : $("#form").serialize(), // post data || get data
                success : function(result) {
                    // you can see the result from the console
                    // tab of the developer tools
                    console.log(result);
                },
                error: function(xhr, resp, text) {
                    console.log(xhr, resp, text);
                }
            })
        });
    });

</script>
</body>
</html>

Les deux fichiers sont placés dans le même répertoire

19
Oli Soproni B.

Vous pouvez utiliser serialize() comme ceci:

$.ajax({
  cache: false,
  url: 'test.php',
  data: $('form').serialize(),
  datatype: 'json',
  success: function(data) {

  }
});
4
Beginner

La réponse acceptée ici fait bien un JSON à partir d'un formulaire, mais le contenu de JSON est en réalité une chaîne avec un contenu encodé en URL.

Pour créer un POST json plus réaliste, utilisez une solution de Sérialiser les données de formulaire en JSON pour créer une fonction formToJson et ajouter contentType: 'application/json;charset=UTF-8' aux paramètres d’appel jax de jQuery.

$.ajax({
    url: 'test.php',
    type: "POST",
    dataType: 'json',
    data: formToJson($("form")),
    contentType: 'application/json;charset=UTF-8',
    ...
})
0
Roman Susi

L'envoi de données de formfields au serveur (php) est généralement effectué par la méthode POST qui peut être trouvée dans le tableau superglobal $ _POST de PHP. Il n'est pas nécessaire de le transformer en JSON avant de l'envoyer au serveur. Petit exemple:

<?php

if($_SERVER['REQUEST_METHOD'] == 'POST')
{
    echo '<pre>';
    print_r($_POST);
}
?>
<form action="" method="post">
<input type="text" name="email" value="[email protected]" />
<button type="submit">Send!</button>

Avec AJAX, vous pouvez faire exactement la même chose, mais sans rafraîchissement de la page.

0
Frank B