如何使用json ajax和php验证登录表单

时间:2015-02-11 12:36:41

标签: php ajax json

<?php
    header('Access-Control-Allow-Origin: *');//Should work in Cross Domaim ajax Calling request
    mysql_connect("localhost","root","root") or die("not connecting");
    mysql_select_db("demo")  ;
       echo"database connecting";
    if(isset($_POST['type']))
    {
        if($_POST['type']=="booking"){
            $dname = $_POST ['Name'];
            $dpwd = $_POST ['Pwd'];
            //$mail = $_POST ['Email'];    

            $query1 = "SELECT count(*) FROM user WHERE username='$dname' AND password='$dpwd'";
            $result1=mysql_query($query1);
            $num_row = mysqli_num_rows($result1);
            echo json_encode($result1);
             if( $num_row>0 )
               {
              while( $row=mysqli_fetch_array($result) ){
                   $_SESSION['userid'] = $row['userid'];
                }
               }
        }
    }

    else{
        echo "Invalid format";
    }
?>   

在放入xampp服务器htdoc后,php代码工作正常,放在xampp服务器上。

这个带有json和ajax验证的html代码。我没有收到任何确认信息

 <!DOCTYPE html>
    <html>
      <head>
        <title>Admin Login</title>
        <!-- Bootstrap -->
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
        <link href="assets/styles.css" rel="stylesheet" media="screen">
         <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
         <script src="vendors/jquery-1.9.1.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
     <script src="js/jquery.validate.min.js"></script>

    <!--  using ajax and json to get data from login fields -->

    <script>
    $(document).ready(function(){

        $("#loginform").validate({
            rules: {
                username: "required",                           
                password: {
                    required: true,
                    minlength: 2
                },
              },
            messages: {
                   username: "Please enter your Name",
                password: "Please enter your Mobile number"                         

            },
            submitHandler: function(form) {
                alert("12");
                // get values from textboxs 
                var uname = $('#username').val();
                var upasssword = $('#password').val();

                $.ajax({

                    //url:"http://service4homes.com/Test/bookService4Homes.php",
                    url:"http://localhost/service4homes/bookService4Homes1.php",
                    type:"POST",
                    dataType:"json",
                    data:{type:"booking", Name:uname, Pwd:upassword },
                    //type: should be same in server code, otherwise code will not run
                    ContentType:"application/json",
                    success: function(){
                       // alert(JSON.stringify(response));
                       $("#result").html('Submitted successfully');
                        //alert("success");
                        window.location.href = 'index1.html';
                    },
                    error: function(err){
                      //  alert(JSON.stringify(err));
                            $("#result").html('There is error while submit');
                        //alert("fail");
                        window.location.href = 'index.html';
                    }
                });
                return false; // block regular submit
            }
        });

    });
    </script>


      </head>
      <body id="login">
        <div class="container" >
        <div id="result"></div>

          <form class="form-signin" id="loginform"  >
            <h2 class="form-signin-heading">Please sign in</h2>
            <input type="text" class="input-block-level" placeholder="Email address" id="username">
            <input type="password" class="input-block-level" placeholder="Password" id="password">
           <!--  <label class="checkbox">
              <input type="checkbox" value="remember-me"> Remember me
            </label> -->
            <button class="btn btn-large btn-primary" type="submit" >Sign in</button>
          </form>


        </div> <!-- /container -->

      </body>
    </html>

PHP代码工作正常放在xampp服务器上,但在json验证不起作用,请帮帮我。

1 个答案:

答案 0 :(得分:0)

如果你想从php谈论javascript,你应该使用json或xml。

在您的php中,您可以在登录和传递匹配时进行此响应:

$response = array('success' => true, 'message' => 'Login successful');

当它失败时:

$response = array('success' => false, 'message' => 'Login fail');

然后发送它(我选择json格式):

header('Content-type: application/json');
echo json_encode($response);

在你的javascript中:

$.ajax({
    ...
    dataType: 'json',
    success: function(response) {
        if (response.success == true) {
            window.location.href = 'index1.html';
        } else {
            alert(response.message);
        }
    }
});