混合输入类型值序列化并通过 jQuery AJAX 发送到 PHP 文件

Question

我有一个带有文本文件和复选框的表单，我想将其值 POST 写入 PHP 文件。我了解到，为了通过$.ajax() 方法执行此操作，我需要 序列化 来自输入的数据并将整个字符串发送到服务器，然后服务器检索字符串并 反序列化它并将它变成一个数组，所以我可以处理每个值。这是正确的吗？

问题是我的 PHP 文件显然没有正确获取字符串，因为它的组成不正确或发送不正确。我将继续处理一些突出这个问题的代码片段。

HTML

<form id="form1">
<fieldset>
<legend>Data for text</legend>
    <label>TF1</label>
    <input type="text" name="tf1" id="tf1" />
    <label>TF2</label>
    <input type="text" name="tf2" id="tf2" />

<legend>Data for checkboxes</legend>
    <label>Check1</label>
    <input type="checkbox" name="check" value="value1" />
    <label>Check2</label>
    <input type="checkbox" name="check" value="value2" />
    <label>Check3</label>
    <input type="checkbox" name="check" value="value3" />

    <input type="button" onclick="ajaxjquery()" value="OK">
</fieldset>
</form>

出现的问题：

• 我已经阅读了几个代码，有人说复选框名称应该是一个数组，因此它会堆叠检查的值。别人说不应该是数组，我还是不太清楚应该是哪种方式正确。

现在，假设 TF1 有一个“x”值，TF2 有一个“y”值，我检查 Check1 和 Check2。

注意：我很清楚使用 jQuery 事件处理程序来调用函数，但目前我没有使用它们。

JavaScript

function ajaxjquery(){
    var str = $("#form1").serialize();
    $.ajax({
        type: "POST",
        url: "test.php",
        data: str
    })
    .done(alert(str));
    $.get("test.php", function(data) {
        alert("Response: " + data);
    });
}

出现的问题：

• 序列化来自输入的数据后，.done(alert(str)); 表示字符串已发送且格式正确：tf1=x&tf2=y&check=value1&check=value2
• 但是，当$.get 尝试检索响应时，即只是刚刚形成的数组或其元素之一，它是一个空白（null？）。无论 php 脚本做什么：我已经尝试了 echoing 唯一变量 var_dump、print_r 和 parse_str 但它总是发送一个空白响应，所以我不确定我是否不是发送正确的字符串，或者来自服务器的响应没有正确发送等等。

如果您想知道，我正在像这样反序列化字符串：

PHP

parse_str($_POST['str'], $data);
echo $data['tf1'];

请注意，如果我从 php 文件中回显任何其他内容，则 $.get 方法会响应正常，除了应该收到的字符串之外的所有内容。

Answer 1

您的复选框名称应该带有[]，即，

<input type="checkbox" name="check[]" value="value1" />

这是一个 PHP 特有的东西，它让 PHP 知道它应该将 POST 数据解释为一个数组。

其次，您不需要在 PHP 端解析数据。 PHP 会自动为您执行此操作。 $_POST['str'] 无效 - 您尚未发送任何名称为“str”的输入。 PHP 不知道你的 JavaScript 变量名是什么。

var_dump($_POST) 看看它包含什么。这应该会为您指明正确的方向。

---

你的 JavaScript 也是错误的：

function ajaxjquery(){
    var str = $("#form1").serialize();
    $.ajax({
        type: "POST",
        url: "test.php",
        data: str
    })
    .done(alert(str)); // alert() will be called immediately, you need to put this in a closure like so:
    .done(function(response) { alert(response); });

    $.get("test.php", function(data) {
        alert("Response: " + data);
    }); // this is sending a separate GET request to test.php passing no data to it -- PHP will never receive any POST nor GET variables
}