如何通过ajax从表单发送POST数据数组？

Posted 2023-02-22

【中文标题】如何通过ajax从表单发送POST数据数组？

【英文标题】：How to send array of POST data from form through ajax?

【发布时间】：2020-09-03 10:42:48

【问题描述】：

我的目标是，当表单中的任何复选框未选中/选中时，复选框值将自动发送到 php 文件以过滤 SQL 数据库并更新 html 页面的某个部分（无需重新加载页面）。步骤：

检查何时在 javascript 中提交表单。 阻止页面加载。 对表单数据使用 serializeArray。 将数据转换为 JSON 字符串。 通过ajax传递给php文件。 php 文件将回显传递的数据。 （用于调试）

我的问题：

通过 ajax 传递的数据为空。即使数据成功转换为 JSON 字符串，也没有任何通过。或者它给出了一个解析错误。 由于我的表单已经从 POST 数据创建了数组，我不确定是否需要 serializeArray。如果没有，我将如何传递数据？

以下是我的 HTML 代码的 sn-p，其中包含一些从 mysql 数据库中提取数据的 PHP。

<form id="selectors" method="POST">
	<div class="selector-title">Categories</div>
	<?php foreach ($categories as $category): ?>
	<input type='checkbox' name='category[]' value='<?php echo $category['category_id'] ?>' id='selector1'><i class="fas fa-<?php echo $category['category_icon'] ?>"></i> <?php echo $category['category_title'] ?>
	<?php endforeach ?>

	<div class="selector-title">Age</div>
	<?php foreach ($ages as $age): ?>
	<input type='checkbox' name='age[]' value='<?php echo $age['age_id'] ?>' id='selector2'><i class="fas fa-<?php echo $age['age_icon'] ?>"></i> <?php echo $age['age_range'] ?>
	<?php endforeach ?>
	<input type="submit">
</form>

<?php getGiftsInCategories(); ?>

这是我在 HTML 正文页脚下的 Javascript 代码：

$(document).ready(function()
  $("form").on("submit", function(e)
    e.preventDefault();
    alert("Page prevented from loading. In function.")

    var data = $('form').serializeArray(); //necessary? if $_POST is  already in an array?
    var JSONData = JSON.stringify(data); //convert array to string
    alert(JSONData);
    var type = typeof JSONData;
    alert(type);
    $.ajax(
        url: "includes/ajax_functions.php",
        type: "POST",
        async: true,
        cache: false,
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        data: data : JSONData,
        success: function(data)
          alert(data);
          console.log("success");
        ,
        error: function (request, status, error) 
            console.log(status);
            console.log(request.responseText);
            console.log(error);
        
    );
  );
)

还有我的 ajax_functions.php：

<?php
function getGiftsInCategories() 
echo $data = json_decode($_POST['data']);

?>

在 Chrome 中检查控制台和警报时，在 JSON.stringify 之后，我收到以下警报： ["name":"category[]","value":"4","name":"age[]","value":"3","name":"age[]","value":"4"] 对应于我选择的复选框。

但是，$.ajax 失败，我收到此错误：

SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at n.parseJSON (jquery.min.js:4)
    at vc (jquery.min.js:4)
    at x (jquery.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery.min.js:4)

如果我删除 dataType: 'json'，我会在 console.log 中成功，但我的警报是空白的，所以没有数据通过。我也得到了

Notice: Undefined index: data in ...\includes\ajax_functions.php

【参考方案1】：

contentType: "application/json; charset=utf-8",

PHP 不知道如何解码 JSON 编码的 HTTP 请求……

data: data : JSONData,

...但是您将 object 传递给 data，而不是 JSON 字符串，因此内容类型是谎言。

删除 contentType 行。

---

echo $data = json_decode($_POST['data']);

解码你的 JSON 化数组的结果将是一个数组。

它不会是 HTML（你没有覆盖 PHP 将设置的内容类型，所以你声称要发送 HTML）也不会是 JSON（你设置的 dataType 属性告诉 jQuery忽略内容类型并将响应视为 JSON）。

以合理的格式输出数据。

【讨论】：

我删除了 contentType 行并将 echo $data.. 行替换为 print_r(json_decode(($_POST['data'])));。它仍然在控制台中给我一个解析器错误和未定义的索引：HTML 页面上的数据。