使用 jquery ajax json 发送表单数据答案

【问题标题】：Send form data with jquery ajax json使用 jquery ajax json 发送表单数据
【发布时间】：2015-08-21 05:34:34
【问题描述】：

我是 PHP/jquery 新手我想问一下如何使用 ajax 以 json 格式从（姓名、年龄等）等表单字段发送 json 数据。可悲的是，我找不到任何相关信息，甚至可以动态进行吗？谷歌搜索只会给出答案，比如手动建立数据。比如：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>

【问题讨论】：

请展示一些您已经在处理的代码，以便我们为您提供帮助
嗨，Oli Soproni B. ！感谢您的评论，我的问题已使用表单代码进行了编辑。

标签： javascript php jquery ajax json

【解决方案1】：

你可以像这样使用serialize()：

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

  }
});

【讨论】：

如果您使用的是$('form').serialize()，那么您不会将数据设为对象；它应该只是data: $('form').serialize(),。

【解决方案2】：

这是一个简单的

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

两个文件放在同一个目录

【讨论】：

数据在这里发布为 url 编码的表单数据，而不是 json。请参考@Roman Susi 的回答
与问题无关。 Asker 想要以 JSON 格式发送表单数据。答案中的 jQuery 以 JSON 格式接收 Ajax 返回，而不是以 JSON 格式发送。

【解决方案3】：

将数据从表单域发送回服务器 (php) 通常是通过 POST 方法完成的，该方法可以在 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，您可以做完全相同的事情，只是无需刷新页面。

【讨论】：

【解决方案4】：

这里接受的答案确实是从表单生成 json，但 json 内容实际上是一个带有 url 编码内容的字符串。

要制作更真实的 json POST，请使用 Serialize form data to 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',
    ...
})

【讨论】：

我不得不说这是唯一正确的答案......以上所有实际上都是在发布FORM帖子内容。 :\ 这值得更多的赞成
内容类型是我错过的！谢谢

【解决方案5】：

为什么要使用 JQuery？

Javascript 提供 FormData api 和 fetch 来轻松执行此操作。

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#submit-form-with-fetch

【讨论】：