使用 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