Question

我有这个ajax / jquery代码：

var headline = $("input#headline").val();
var subheadline = $("textarea#subheadline").val();
var pics = $("input#pics").val();   
var dataString = 'headline='+ headline + '&subheadline=' + subheadline + '&pics=' + pics;

$(".save-notice").hide();
$.ajax({  
type: "POST",  
url: "web-block/forms/process-001.php",
data: dataString,
success: function() {             
$(".save-notice").show();
$(this).parents(".manage-content-wrap").next(".ribbon-content").fadeIn();
}  
});

另一方面，我有这个HTML表单：

<form action="" id="select-block" class="general-form">
<div class="input-wrap">
    <input class="clearme" name="Headline" value="<?php echo $Headline;?>" id="headline"/>
</div>
<div class="input-wrap">
    <textarea class="clearme" name="Sub-Headline" id="subheadline"><?php echo $SubHeadline;?></textarea>
</div>
<label>Bottom Left Image</label>
<div class="up-mask">
    <span class="file-wrapper">
      <input type="file" name="Pics" class="photo" id="pics" />
      <span class="button">
         <span class="default-txt">Upload Photo</span>
      </span>
    </span>
</div><!-- .up-mask -->

<input type="hidden" name="Key" value="<?php echo $Key;?>"/>
<input type="submit" class="submit-btn" value="SAVE" />
<span class="save-notice">Your changed has been saved!</span>
</form>

正如您所见，process-001.php是处理HTML表单中所有变量的文件。但是我很难“抓住”那个表格提交的$Headline和$SubHeadline，它实际上也是由阿贾克斯“操纵”......

我尝试在process-001.php上使用此代码：

$Headline = $_POST['Headline'];
$SubHeadline = $_POST['Sub-Headline'];

但似乎这些变量是空的......如何正确获取AJAX提交的变量？

Answer 1

尝试像

这样的数据流

var dataString = {
                   headline: headline,
                   subheadline: subheadline,
                   pics:pics
                };

用于在php中获取你需要使用

$ Headline = $ _POST ['headline'];

$ SubHeading = $ _POST ['subheading'];

它会正常工作

Answer 2

headline和Headline不是同一个密钥。您的密钥需要与完全匹配。

此外，由于手工构建字符串会非常棘手，您可能需要考虑使用对象字面值或serialize()：

data: {
    'foo': 'bar',
    'baz': [1, 2, 3]
}

会有$_POST['foo'] === 'bar'和$_POST['baz'] === array(1, 2, 3)

您也不应该假设存在任何类型的输入：

$headline = (isset($_POST['headline'])) ? $_POST['headline'] : null;

否则您可以获得索引未定义的通知。

另外，由于您没有使用$.post未公开的任何选项，因此您可以使用$.post作为简写：

$.post("web-block/forms/process-001.php", {
    data: $("#select-block").serialize(),
    function() {             
        $(".save-notice").show();
        $(this).parents(".manage-content-wrap").next(".ribbon-content").fadeIn();
    }  
});

或者：

$.post("web-block/forms/process-001.php", {
    data: {
        Headline: $("#headline").val(), //input#headline is redundant -- getting a node by ID is extremely efficent; getting by tag is not
        'Sub-Headline': $("#subheadline").val()
    },
    function() {             
        $(".save-notice").show();
        $(this).parents(".manage-content-wrap").next(".ribbon-content").fadeIn();
    }  
});

Answer 3

$_POST变量区分大小写 - 您在ajax端的变量是小写的，PHP端是大写的。

Answer 4

您确定曾经请求过程001.php吗？因为，其中一种可能性是，当您单击“提交”按钮时，包装表单已提交为空操作。

更安全的方式是

<input type="submit" class="submit-btn" value="SAVE" onclick="return false;" />

和

<script type="text/javascript">
$('form#select-block input:submit').click(function() {
  // ajax goes here
});
</script>

如何正确使用PHP提交AJAX提交的变量？

4 个答案: