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

Question

使用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);
    });
  }
});

Answer 1

用$(this).serializeArray()代替$(this).serialize()

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

两者之间的区别:

serializeArray创建一个数组（不是“json数组”-没有这种东西）；您可以使用测试自己console.log($("#myform").serializeArray())。另一方面，serialize创建要作为HTTP请求一部分的查询字符串。两种表示形式在某种意义上是等效的，即使用适当的代码，您可以毫无歧义地将一个转换为另一个。

两种版本均可用的原因是，serialize当您只想发出HTTP请求（将结果放入查询字符串中）时serializeArray更方便，而如果您要自己处理结果则更方便。

jQuery的AJAX方法不在乎您是否给它们一个，因为它们会检测参数的类型并将其转换为查询字符串（如果尚未输入），因此，从外部观察者发出的请求无法分辨出参数的原始格式。

您需要执行以下操作：-

<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] => [e-mail]
    [modal_message] => sadada
    [action] => send_message
)

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

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