dongyong3554
2012-07-03 14:59
浏览 54

jQuery Mobile和PHP登录系统无法正常工作

I'm trying to create a login system for my jQuery mobile app but it's not doing anything after the login button is clicked. Right now I'm not using a db connection.

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="jquery.mobile-1.1.0/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css">
<link href="jquery.mobile-1.1.0/jquery.mobile.structure-1.1.0.min.css" rel="stylesheet" type="text/css">
<script src="jquery.mobile-1.1.0/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
    $('#loginform').submit(function(){
    $('#output').html('Connecting...');
    var postTo = 'http://www.hedonsoft.com/game/login.php';
    $.post(postTo,{userLbl: $('[name=username]').val(), passwordLbl: $('[name=password]').val()}, function (data){
        if(data.message){
            $('#output').html(data.message);    
        }else{
            $('#output').html("Could not connect"); 
        }
        }, 'json');

        return false;
    });
    }); 
</script>
<script src="jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="custom.css" />
</head>

<body>
<div data-role="page" id="mc_main">
  <div data-role="header" id="header">
    <h1>Main Menu</h1>
  </div>

<div data-role="content">
<div data-role="collapsible" id="logindiv"><h2>Login</h2>
   <form id="loginform" method="post">
 <div data-role="fieldcontain">
      <label for="user">Username:</label>
      <input type="text" name="user" id="user" value=""  />
    </div>
    <div data-role="fieldcontain">
      <label for="pass">Password:</label>
      <input name="pass" type="password" id="pass" value="">
    </div>
    <input type="submit" value="Login" data-icon="check" data-theme="a"/>
   </form>
   <div id="output"></div>
       </div>
</div>
</body>
</html>

login.php

<?php
if(isset($_POST['username'] and isset($_POST['password'])) {

 // do logic for logining in (usually query your db)
 if ($_POST['username'] == 'test' and $_POST['password'] == 'test') {
 $data['success'] = true;
 $data['message'] = 'Login succesful';
 } else {
 $data['success'] = false;
 $data['message'] = 'Login failed';
 }
 // return json
 echo json_encode($data);
}
?>

I get 'Connecting...' in #output but that's it.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • drbfxb977777 2012-07-03 15:07
    已采纳

    Your input name for the user field is "user".

    Change your javascript to look like this

    $.post(postTo,{userLbl:$('[name=user]').val(), ...
    

    Then your login.php should looke like this:

    <?php
    if(isset($_POST['userLbl'] and isset($_POST['passwordLbl'])) {
    
     // do logic for logining in (usually query your db)
     if ($_POST['userLbl'] == 'test' and $_POST['passwordLbl'] == 'test') {
     $data['success'] = true;
     $data['message'] = 'Login succesful';
     } else {
     $data['success'] = false;
     $data['message'] = 'Login failed';
     }
     // return json
     echo json_encode($data);
    }
    ?>
    
    点赞 打赏 评论
  • doulin3510 2012-07-03 15:42

    Your server is returning an error 500. That's why it doesn't work!

    You can check my fiddle if you want: http://jsfiddle.net/ooflorent/7cYae/

    点赞 打赏 评论
  • dongxixiu9134 2012-11-27 21:59

    The login.php code has a syntax error on line 2. It should read:

    if(isset($_POST['userLbl']) && isset($_POST['passwordLbl']))

    点赞 打赏 评论

相关推荐 更多相似问题