javascript - 使用 PHP、POST 和 JSON 使用 JQuery Mobile 将数据发送到服务器时出现问题

Question

我已经彻底研究了这个主题，但由于讨论的零散性质以及每个人似乎拥有的非常不同的用例，我似乎无法找到答案。

我正在使用 JQuery Mobile 通过 $.ajax() 调用将数据发送到 PHP 登录/注册脚本。似乎我尝试发送的数据从未到达服务器进行评估，我不知道为什么。

我正在尝试从这个表单发送数据:

<div data-role="content">
    <form id="reg_form" data-ajax="false">
      <div data-role="fieldcontain">
        <label for="reg_email">Email:</label>
        <input type="email" name="reg_email" id="reg_email" value=""  />

        <label for="reg_pass">Password:</label>
        <input type="password" name="reg_pass" id="reg_pass" value=""  />

        <label for="reg_pass_conf">Password:</label>
        <input type="password" name="reg_pass_conf" id="reg_pass_conf" value=""  />

      <h4 id="reg_notification"><?php echo 'Notifications will appear here...';  ?></h4>
      <button data-theme="b" id="reg_submit" type="button">Register!</button>
      </div>
  </form>
</div>

由这个 javascript 触发:

$(document).on('pageshow', '#reg_page', function() {
    $("#reg_notification").text("page loaded");

    $(document).on('click', '#reg_submit', function(){
        $("#reg_notification").text("button clicked");

        var formDataReg = $("#reg_form").serialize();

        $.ajax({
            type: "POST", // Method of sending data to server
            url: "php_scripts/reg_handle.php", // php script being sent to
            cache: false,  // requested pages won't be cached by server
            data: formDataReg, // data to be sent to server
            dataType: "json", // data type to be received back from server
            success: onRegSuccess, // function to call on success
            error: onError  // function to call on error
        });

        return false;

    });
});


function onRegSuccess(data, status)
{
    alert(data);
    $("#reg_notification").text(data.email + ' ' + data.pass + ' ' + data.pass_conf);   
}

哪个被发送到这个 php 脚本:

<?php

if (isset($_POST['formDataReg'])) {
    $reg_email = 'formData is set';
}else{
    $reg_email = 'formData is not set';
}

$formData = json_decode($_POST['formDataReg']); 

$reg_pass = $formData->{'reg_pass'};
$reg_pass_conf = $formData->{'reg_pass_conf'};

$output = array('email' => $reg_email, 'pass' => $reg_pass, 'pass_conf' =>     $reg_pass_conf);
echo json_encode($output);
?>

但是，如前所述，if/else block 检测到 $_POST['formDataReg'] 甚至没有设置。当我尝试使用它为变量赋值时，它显然没有要赋值的数据，我得到的是空值。

我使用警报来验证 formDataReg 在 ajax 调用中传递到服务器之前确实保存了正确的表单值。它以某种方式在 ajax 调用中丢失，或者我没有正确访问它。

如果有人能指出正确的方向，我将不胜感激。

Answer 1

由此:

var formDataReg = $("#reg_form").serialize();

您将表单序列化为表单。现在 formDataReg 中有这样的内容:

reg_email=xxx@gmail.com&reg_pass=yyy&reg_pass_conf=yyy

你必须在你的 php 文件中解析这个查询:

$email = $_POST['reg_email'];
$pass = $_POST['reg_pass'];
$pass_conf = $_POST['reg_pass_conf'];

但是您尝试使用未发送的 $_POST['formDataReg']。所以这是错误的。是的，您的 JS 中有变量 formDataReg，但它没有任何意义。您已经使用 ajax 请求发送了序列化字符串(查询)并且必须处理它。

所以这段代码:

if (isset($_POST['formDataReg'])) {
    $reg_email = 'formData is set';
}else{
    $reg_email = 'formData is not set';
}

$formData = json_decode($_POST['formDataReg']); 

不会工作，因为你没有发送 formDataReg 并且 $_POST 数组中的这个键没有值。

这个:

$reg_pass = $formData->{'reg_pass'};
$reg_pass_conf = $formData->{'reg_pass_conf'};

$output = array('email' => $reg_email, 'pass' => $reg_pass, 'pass_conf' =>     $reg_pass_conf);
echo json_encode($output);

应该可以正常工作。

让我知道有什么不清楚的。