javascript - 从 jquery 进行 Ajax 调用后，php $POST[] 为空

Question

表格:

<form method="post" id="loginForm">
    <div class="form-group">
        <label for="email-signin">Email address:</label>
        <input type="email" class="form-control" id="email-signin" name="email-signin">
    </div>
    <div class="form-group">
        <label for="pwd-signin">Password:</label>
        <input type="password" class="form-control" id="pwd-signin" name="pwd-signin">
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-default" id="signIn" name="signIn">Sign In</button>
    <div id="error">
        <!-- error will be shown here ! -->
    </div>
</form>

jquery:

$("#signIn").on("click", function(e) {

   e.preventDefault();

    var values = $("#loginForm").serialize();

    console.log( values );

    $.ajax({
        type: "POST",
        url: "../php/BusinessLayer/User.php",
        data: values,
        beforeSend: function() { $("#error").fadeOut() },
        success :  function(response)
        {
            console.log("Success");
            if(response=="ok"){

            }
            else{
                $("#error").fadeIn(1000, function(){
                    $("#error").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> &nbsp; '+response+' !</div>');
                });
            }
        }
});

php:

<?php

 session_start();

include ("../DataLayer/VO/UserVO.php");
include ("../DataLayer/DAO/UserDAO.php");

// Database Execution for User Related Request
$userDAO = new UserDAO();

print_r($_POST);

if(isset($_POST['signIn']))
{
  echo 'test2';

  $user = new UserVO();

  $user->setEmail(trim($_POST['email-signin']));
  $user->setPassword(trim($_POST['pwd-signin']));

  // Request signin
  $userDAO->signIn($user);
}

使用此代码，我的 php 文件中的 if(isset($_REQUEST['signIn'])) 永远不会返回 true。我尝试了多种方法，但似乎没有任何效果。

PS:我使用的是 Jquery 1.12.4

另外，我的 print_r($_POST);返回一个空数组。

Answer 1

jQuery 的序列化函数不会对按钮的值进行编码。取自here

注意:此答案最初由 slashingweapon 发布

jQuery's serialize() is pretty explicit about NOT encoding buttons or submit inputs, because they aren't considered to be "successful controls". This is because the serialize() method has no way of knowing what button (if any!) was clicked.

I managed to get around the problem by catching the button click, serializing the form, and then tacking on the encoded name and value of the clicked button to the result.

$("button.positive").click(function (evt) {
    evt.preventDefault();

    var button = $(evt.target);                 
    var result = button.parents('form').serialize() 
        + '&' 
        + encodeURIComponent(button.attr('name'))
        + '='
        + encodeURIComponent(button.attr('value'))
    ;

    console.log(result);
});

就 PHP 端的 var 转储为空而言，请尝试使用 jQuery 的 .click 而不是 .on 事件。

$('#signIn').click(function(){});

此外，从表单中删除该方法。看起来只要您单击按钮，表单就可以提交。另外，删除

e.preventDefault();

和地点

return false;

在点击函数的最后。 return false 做了 3 件事

1. e.preventDefault()
2. e.stopPropigation();
3. 立即返回