PHP AJAX 表单提交无页面刷新多变量传递

Question

对这门语言相当陌生，我已经创建了一个简单的登录系统，我正在尝试在不刷新页面的情况下提交表单。我已经完全创建了没有页面刷新的注册系统(加上动态用户名检查)，现在我也尝试转换实际的登录表单，以便用户可以在没有页面刷新的情况下显示为已登录。

我尝试使用相同的方法，但是现在我需要将用户名和密码都传递给验证脚本，并且出于某种原因我无法让密码部分工作......尽管用户名工作正常。

我将其设置为在密码验证成功时显示一个错误，如果密码验证失败则显示另一个错误。我可能想多了，感谢您在这个可能微不足道的问题上提供的帮助

PS 首先使用堆栈，所以请指出格式等方面的任何建议

PHP

<?php
require_once('startsession.php');
$page_title = 'Log In';
require_once('header.php');
require_once('connectvars.php');
require_once('navmenu.php');
?>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="invisiblelogin.js"></script>

<script type="text/javascript">

$(document).ready(function() {
$('.error').hide(); 
$('#Info').hide();      
});

function check_login(){
var username = $("#username").val();
var password = $("#password").val();
if(username.length > 0 && password.length > 0){
    $.post("logincheck.php", {
        username: $('#username').val(),
        password: $('#password').val(),
    }, function(response){
        setTimeout("finishAjax('Info', '"+escape(response)+"')", 450);
    });
    return false;
}
  }

 function finishAjax(id, response){
 //showing of errors is just visually showing me whether or not the password validation      worked
$('#'+id).html(unescape(response));
var valid = $("#Info").html();
if( valid > 0) {
    $("label#username_error2").show();
}
else {
$("label#password_error").show();
}
} 

</script>


<div id="contact_form">
<form action="" name="contact">
<fieldset><legend>Log In Info</legend>

  <font color="red"><div id="Info"></div></font>

  <table>
  <tr><td><label for="username" id="username_label">Username:</label>
    <input type="text" id="username" name="username" value="" class="text-input" /></td>
  <td><label class="error" for="username" id="username_error2">Enter your username.    </label></td></tr>

  <tr><td><label for="password" id="password_label">Password:</label>
  <input type="password" id="password" name="password" value="" class="text-input" />    </td>
  <td><label class="error" for="password" id="password_error">Enter your password.    </label></td></tr></table>



  <input type="submit" name="submit" class="button" id="submit_btn" value="Sign Up"   onclick="return check_login();" />
</fieldset>
</form>
</div>

<?php
// Insert the page footer
require_once('footer.php');
?>

JS

$(function() {
$('.error').hide();
$(".button").click(function() {
  // validate and process form here

  $('.error').hide();
    var username = $("input#username").val();
    var password = $("input#password").val();       

    if (username == "" || password == "") { 
      if (username == "") {
        $("label#username_error2").show();
        $("input#username").focus();
      }
      if (password == "") {
        $("label#password_error").show();
        $("input#password").focus();
      }
      return false;
    }
 return false;
  });




 });

中级 PHP

<?php
require_once('connectvars.php');
if($_REQUEST)
{
$dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME) or die (mysqli_error());
$username   = mysqli_real_escape_string($dbc, trim($_REQUEST['username']));
$password   = mysqli_real_escape_string($dbc, trim($_REQUEST['password']));
$query = "SELECT * FROM login_info WHERE username = 'username' AND password =   SHA('$password')";

      //  ------------ THIS PASSWORD PART DOES NOT READ CORRECTLY


$data = mysqli_query($dbc, $query);

if (mysqli_num_rows($data) > 0) {
    echo '1';
}
else {
    echo '0';
}   
}
?>

Answer 1

好的..有几件事...

---

我认为您需要对可能真正存在的两件事进行故障排除... 1) 传递给 PHP 页面的值是否正确？您可以在 firebug(每个开发人员都应该拥有的 firefox 扩展)的 CONSOLE 中检查它。 2) 您的实际密码验证工作正常吗？硬编码密码。使用 die() 函数在 PHP 页面中输出数据。结果也将在 Firebug 中看到。

---

如果您在 JS 端使用 $.post()，您的 PHP 应该使用 $_POST 而不是 $_REQUEST。应该不会影响任何值得注意的事情，但我只是想补充一下。

---

这段代码有点令人担忧......

if( valid > 0) {
    $("label#username_error2").show();
}else {
    $("label#password_error").show();
}

很可能，valid 是一个字符串，并且不会将“0”解析为 0。虽然登录脚本是一个真/假 (0/1) 过程，但被调用的 PHP 页面ajax 函数应该总是返回某种结构。例如……

更改您的 POST 以期待 json 响应。

$.post("logincheck.php", {
    username: $('#username').val(),
    password: $('#password').val(),
}, function(response){
    setTimeout(function(){            //Note the change here. 
        finishAjax('Info', response); //Note the change here. 
    }, 450);                          //Note the change here. 
}, 'json');                            //Note the change here. 

然后创建一个 PHP 函数，它将返回您的 JS 将使用的 json 包。

function SendJSONResponse($success, $msg=null, $additionalReturnData=null){
    $result = array('success'=>$success);
    if ($msg) $result['msg']=$msg;
    if ($additionalReturnData) $result=array_merge($reult, $additionalReturnData);
    die(json_encode($result));
}

一旦你有了它，你的登录脚本应该看起来更像

if (mysqli_num_rows($data) > 0) {
    SendJSONResponse(
        true, 
        null, 
        array('data'=>$data) //Pass the logged in users info for use in JS
    );
}else {
    SendJSONResponse(false, 'Username or Password not found');
}  

你的 JS 看起来像这样......

function finishAjax(id, response){
    if( response.success) {
        alert('logged in as ' + response.data.full_name + ' (' + response.data.email + ')');
        $("label#username_error2").show();
    }else {
        alert(response.msg);
        $("label#password_error").show();
    }
}