wake-up-neo.com

Senden Sie Formulardaten mit Jquery Ajax Json

Ich bin neu in PHP/jquery Ich möchte fragen, wie Sie Json-Daten aus einem Formularfeld (Name, Alter usw.) mit Ajax im Json-Format senden. Leider kann ich keine relevanten Informationen dazu finden. Es ist sogar möglich, dies dynamisch zu tun. Die Google-Suche gibt nur Antworten wie den manuellen Aufbau der Daten zurück. wie: name: X Y, age: 32 und so weiter.

Gibt es das überhaupt zu tun?

Danke für die Hilfe!

Bearbeiten:

<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

hier ist eine einfache

hier ist meine test.php nur zum Testen

<?php

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

echo json_encode($_POST);

hier ist meine 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>

Beide Dateien befinden sich im selben Verzeichnis

19
Oli Soproni B.

Sie können serialize() folgendermaßen verwenden:

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

  }
});
4
Beginner

Die akzeptierte Antwort hier macht zwar einen Json aus einem Formular, aber der JSON-Inhalt ist wirklich ein String mit URL-kodiertem Inhalt.

Um einen realistischeren Json-POST zu erreichen, verwenden Sie eine Lösung aus Serialize-Formulardaten in JSON , um formToJson-Funktion zu erstellen, und fügen Sie contentType: 'application/json;charset=UTF-8' zu den jQuery-Ajax-Aufrufparametern hinzu.

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

Das Senden von Daten aus Formularfeldern an den Server (PHP) erfolgt normalerweise mit der Methode POST, die sich im superglobalen Array $ _POST in PHP befindet. Sie müssen es nicht in JSON umwandeln, bevor Sie es an den Server senden. Kleines Beispiel:

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

Mit AJAX können Sie genau dasselbe tun, nur ohne Seitenaktualisierung.

0
Frank B