PHP AJAX表单提交没有页面刷新多个变量传递

时间:2013-05-25 09:29:02

标签: php jquery ajax

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

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

我设置为如果密码验证成功则显示一个错误,另一个如果不成功则显示错误..我可能正在思考它,我感谢您对这个可能微不足道的问题的帮助

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';
}   
}
?>

1 个答案:

答案 0 :(得分:1)

好的..几件事......


我认为你需要解决它真正可能发生的两件事...... 1)正确的值是否传递给PHP页面?你可以在firebug的CONSOLE中检查这个(firefox的扩展名,每个开发人员应该有)。 2)您的实际密码验证是否正常?硬编码密码。使用die()函数在PHP页面中输出数据。结果也将在萤火虫中看到。


如果你在JS端使用$ .post(),你的PHP应该使用$ _POST而不是$ _REQUEST。不应该影响任何值得注意的东西,但只是想我会补充一点。


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

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

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

更改您的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();
    }
}