web-dev-qa-db-ja.com

jquery ajax jsonでフォームデータを送信する

私はPHP/jqueryが初めてなので、（名前、年齢などの）フォームフィールドからjson形式のajaxでjsonデータを送信する方法を尋ねたいと思います。悲しいことに、これに関する関連情報が見つからないため、動的に実行することさえ可能ですか？ Google検索は、データを手動で作成するような回答のみを返します。など：name: X Y、age: 32、 等々。

とにかくそれを行うにはありますか？

助けてくれてありがとう！

編集：

<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

ここに簡単なものがあります

これはテスト専用のtest.phpです

<?php

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

echo json_encode($_POST);

ここに私の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>

両方のファイルは同じディレクトリに配置されます

19
Oli Soproni B.

次のようにserialize()を使用できます。

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

  }
});
4
Beginner

ここで受け入れられた答えは確かにフォームからjsonを作成しますが、jsonの内容は実際にはURLエンコードされた内容を持つ文字列です。

より現実的なjson POSTを作成するには、 フォームデータをJSONにシリアル化する のソリューションを使用してformToJson関数を作成し、contentType: 'application/json;charset=UTF-8'をjQuery ajax呼び出しパラメーターに追加します。

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

フォームフィールドからサーバー（php）にデータを送信することは、通常、POSTメソッドによって行われます。このメソッドは、PHP内のスーパーグローバル配列$ _POSTで見つけることができます。サーバーに送信する前に、小さな例：

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

AJAXを使用すると、ページを更新することなく、まったく同じことができます。

0
Frank B