使用 jquery ajax json 發送表單數據

Question

我是 PHP/jquery 的新手，我想問一下如何使用 ajax 以 json 格式從表單字段（如（姓名、年齡等））發送 json 數據。 可悲的是，我找不到任何有關此的相關信息，甚至可以動態執行此操作嗎？ 谷歌搜索只返回答案，比如手動建立數據。 比如： name: XY ， 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>

Answer 1

這是一個簡單的

這是我的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>

兩個文件都放在同一目錄中

Answer 2

您可以像這樣使用serialize() ：

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

  }
});

Answer 3

這里接受的答案確實從一個表單中生成一個json，但json內容實際上是一個帶有url編碼內容的字符串。

為了使更真實的json POST，使用從Serialize表單數據到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',
    ...
})

Answer 4

通過POST方法可以將表單域中的數據發送回服務器（php），這可以在PHP內部的超全局數組$ _POST中找到。 在將其發送到服務器之前，無需將其轉換為JSON。 小例子：

<?php

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

使用AJAX，您可以完成相同的操作，只需要不刷新頁面。

Answer 5

既然可以使用 FormData javascript API 來完成，為什么還要使用 JQuery。

var form = document.querySelector('form');
form.onsubmit = function(event){
    var formData = new FormData(form);
    
    fetch("/test.php",
    {
       body: formData,
       method: "post"
    }).then(…);
    
    //Dont submit the form.
    return false; 
}

參考： https : //metamug.com/article/html5/ajax-form-submit.html

使用 jquery ajax json 發送表單數據

問題描述

5 個解決方案

解決方案1
19 已采納 2015-06-06 08:42:04

解決方案2
4 2015-06-06 08:33:07

解決方案3
4 2018-12-13 06:44:54

解決方案4
0 2015-06-06 08:48:06

解決方案5
0

使用 jquery ajax json 發送表單數據

問題描述

5 個解決方案

解決方案1 19 已采納 2015-06-06 08:42:04

解決方案2 4 2015-06-06 08:33:07

解決方案3 4 2018-12-13 06:44:54

解決方案4 0 2015-06-06 08:48:06

解決方案5 0

解決方案1
19 已采納 2015-06-06 08:42:04

解決方案2
4 2015-06-06 08:33:07

解決方案3
4 2018-12-13 06:44:54

解決方案4
0 2015-06-06 08:48:06

解決方案5
0