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


Mixed input types values serialized and sent to PHP file via jQuery AJAX

我有一个包含文本文件和复选框的表单,我希望将其值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脚本做什么:我已经尝试过echo作为唯一的变量var_dumpprint_rparse_str,但它总是发送一个空白响应,所以我不确定我是否发送了正确的字符串,或者服务器的响应是否没有正确发送

如果你想知道,我正在反序列化字符串,如下所示:

PHP

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

请注意,如果我从php文件中回显任何其他东西,$.get方法的响应都是正常的,除了应该接收到的字符串之外。

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

<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
}