无法使用 PHP $_POST[] 变量检索 jQuery 序列化表单数据答案

【问题标题】：Can't retrieve jQuery serialized form data with PHP $_POST[] variable无法使用 PHP $_POST[] 变量检索 jQuery 序列化表单数据
【发布时间】：2017-07-26 04:50:51
【问题描述】：

使用 Ajax jQuery 函数 $.post()，我将 jQuery serialized() 表单数据发送到 PHP 函数，该函数在 $_POST[] 中成功接收它，但单个 $_POST['form_field'] 变量为空。

在我的PHP函数中，print_r($_POST)成功显示表单数据：

Array ( [action] => send_message [data] => modal_name=olivier&modal_email=olivier%40hotmail.com&modal_message=Hello+world )

然而$_POST['modal_name']、$_POST['modal_email'] 和$_POST['modal_message'] 是空的。为什么？

HTML：

<form id='contact'>
  <input type='text' name='modal_name' id='modal_name' />
  <input type='email' name='modal_email' id='modal_email' />
  <textarea name='modal_message' id='modal_message'></textarea>
</form>

JS：

$('#contact').on('submit', function(e) {
  e.preventDefault();
  if (modal_name && modal_email && modal_message) {
    var data = {
      action: 'send_message',
      data: $(this).serialize()
    };
    $.post(WPaAjax.ajaxurl, data, function(response) {
      $('.modal').append(response);
    });
  }
});

【问题讨论】：

正如您在$_POST 中看到的，您的data 密钥包含一个序列化字符串。因此，您可以对其进行解析或不序列化两次并直接发送序列化表单：var data = $(this).serialize();

标签： php jquery ajax forms

【解决方案1】：

使用$(this).serializeArray() 而不是$(this).serialize()

参考：-https://api.jquery.com/serializeArray/

两者的区别：-https://stackoverflow.com/a/10430571/4248328

您需要执行以下操作：-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id='contact'>
  <input type='text' name='modal_name' id='modal_name' />
  <input type='email' name='modal_email' id='modal_email' />
  <textarea name='modal_message' id='modal_message'></textarea>
  <input type="submit" value = "submit">
</form>

<script type="text/javascript">
$('#contact').on('submit', function(e) {
  e.preventDefault();
  if (modal_name && modal_email && modal_message) {
     var data = $(this).serializeArray();
     data.push({name: 'action', value: 'send_message'});
     $.post('query.php', data, function(response) {
      $('.modal').append(response);
    });
  }
});
</script>

在 php 中：-

<?php

if(!empty($_POST)){
    echo "<pre/>";print_r($_POST);
}
?>

它会像这样输出：-

<pre/>Array
(
    [modal_name] => sdsadsa
    [modal_email] => a@gmail.com
    [modal_message] => sadada
    [action] => send_message
)

注意：- 如果您想使用 serialize()only，请执行以下操作：-

<script type="text/javascript">
$('#contact').on('submit', function(e) {
  e.preventDefault();
  if (modal_name && modal_email && modal_message) {
     var data = $(this).serialize()+ '&action=send_message';
     $.post('query.php', data, function(response) {
      $('.modal').append(response);
    });
  }
});
</script>

【讨论】：

谢谢，但是 $_POST['modal_name'] 仍然是空的。
看起来双重序列化搞砸了一切，现在可以工作了，谢谢！
@drake035 很高兴为您提供帮助:):)

【解决方案2】：

您应该改用$_POST['data']['modal_name']、$_POST['data']['modal_email'] 和$_POST['data']['modal_message']。也可以使用 jQuery 中的$.serializeArray()。

原因是您将表单数据作为名为@987654325@ 的参数发送。

【讨论】：

现在使用 serializeArray()，$_POST['data']['modal_name'] 为空，$_POST['modal_name'] 也是。