Fatal编程技术网
  • php/
  • 如何使用json ajax和php验证登录表单

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

php ajax json

如何使用json ajax和php验证登录表单,php,ajax,json,Php,Ajax,Json,Php代码在放入xampp服务器htdoc之后，可以很好地工作在xampp服务器中 此html代码使用json和ajax进行验证。我没有收到任何确认信息 <?php header('Access-Control-Allow-Origin: *');//Should work in Cross Domaim ajax Calling request mysql_connect("localhost","root","root") or die("not connecting"

Php代码在放入xampp服务器htdoc之后，可以很好地工作在xampp服务器中

此html代码使用json和ajax进行验证。我没有收到任何确认信息

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


管理员登录
$（文档）.ready（函数（）{
$（“#loginform”）.validate({
规则：{
用户名：“必需”，
密码：{
要求：正确，
最小长度：2
},
},
信息：{
用户名：“请输入您的姓名”，
密码：“请输入您的手机号码”
},
submitHandler:函数（表单）{
警报（“12”）；
//从文本框中获取值
var uname=$（'#username'）.val（）；
var upassswill=$（'#password'）.val（）；
$.ajax({
//url:“http://service4homes.com/Test/bookService4Homes.php",
url:“http://localhost/service4homes/bookService4Homes1.php",
类型：“POST”，
数据类型：“json”，
数据：{类型：“预订”，名称：uname，Pwd:upassword}，
//类型：在服务器代码中应相同，否则代码将不会运行
ContentType:“应用程序/json”，
成功：函数（）{
//警报（JSON.stringify（响应））；
$（“#结果”）.html（'提交成功'）；
//警惕（“成功”）；
window.location.href='index1.html'；
},
错误：函数（err）{
//警报（JSON.stringify（err））；
$（“#结果”）.html（'提交时出错'）；
//警报（“失败”）；
window.location.href='index.html'；
}
});
返回false；//阻止定期提交
}
});
});
请登录
登录
Php代码在xampp服务器中运行良好，但在json验证中不起作用，请帮助我。

当您想从Php与javascript对话时，应该使用json或xml

在php中，当登录名和密码匹配时，您可以做出以下响应：

 <!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>
当它失败时：

$response = array('success' => true, 'message' => 'Login successful');
然后发送它（我选择json格式）：

在javascript中：

header('Content-type: application/json');
echo json_encode($response);
控制台中是否有任何错误？您使用了哪个验证引擎？控制台中是否有任何错误？Json对象响应无法直接访问任何变量，需要使用Json.parse（response）在Json中转换，然后调用catalog.org函数您不必解析响应，Jquery已经为您做了，因为您将数据类型指定为Json 
header('Content-type: application/json');
echo json_encode($response);

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