为什么我无法通过使用Ajax的查询连接到数据库？

Question

I am trying to make a login with AJAX, PHP and MySql but I can`t communicate to my PHP query using AJAX. 我正在尝试使用AJAX，PHP和MySql进行登录，但是我无法使用AJAX与我的PHP查询进行通信。

This is my code: 这是我的代码：

This is my php query 这是我的PHP查询

<?php
include_once("../Connector/db_open.php");
if(isset($_POST['btnLogin'])) {
    $user_name = trim($_POST['user_email']);
    $pass_word = trim(md5($_POST['password']));

        if (empty($user_name) && empty($pass_word))
        {
            echo "Please fill-up everything!!!";
        }
        else
        {
            $login = "SELECT uid, user_name, pass_word, email FROM tbluser WHERE user_name = '$user_name'";
            $result = mysqli_query($conn, $login) or die("database error:". mysqli_error($conn));

            if ($result->num_rows >0) 
            {
                $row = mysqli_fetch_assoc($result);    
                session_start();
                $_SESSION["uid"] = $row["uid"];
                $_SESSION["user_name"] = $row["user_name"];
                $user_id = $row["uid"];
                $user_status = $row["status"];

                if ($user_name != $row["user_name"]) 
                {
                    echo "User not exist";
                }
                else
                {
                    echo "Successfully Login";
                    $_SESSION['user_id'] = $user_id;
                    header("location: ../Pages/index.php");
                }
            }
        }    
    }
?>

This is my ajax and html 这是我的ajax和html

<?php 
    session_start();
    if (isset($_SESSION["user_id"])) 
    {
        header("location: Pages/index.php");
    }
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- jQuery -->
<link rel="apple-icon-precomposed" sizes="144x144" href="assets/ico/apple-icon-144-precomposed.png">
<link rel="apple-icon-precomposed" sizes="114x114" href="assets/ico/apple-icon-114-precomposed.png">
<link rel="apple-icon-precomposed" sizes="72x72" href="assets/ico/apple-icon-72-precomposed.png">
<link rel="apple-icon-precomposed" href="assets/ico/apple-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<?php 
include('include/header.php');
include_once("Connector/db_open.php");
?>
<title>RAFI</title>

<script type="text/javascript">
    $(document).ready(function(){

        $("#btnLogin").click(function(event){
            event.preventDefault();
            $.ajax({
                url: "query/login_query.php",
                method: "POST",
                data: $('form').serialize(),
                dataType: "text",
                success: function(response) {
                    $("#btnLogin").html('<img src="images/ajax-loader.gif" /> &nbsp; Connecting ...');
                    if (response=="Please fill-up everything!!!") 
                    {
                        alert("Please fill-up everything");
                    }
                    else if(response=="User not exist")
                    {
                        alert("User not exist");
                    }
                    else if(response=="Successfully Login")
                    {
                        setTimeout(' window.location.href = "Pages/index.php"; ',4000);
                    }
                }
            });
        });

    });
</script>

<?php include('include/navbar.php');?>
<div class="container"> 
        <div class="row text-center " style="padding-top:10px;">
            <div class="col-md-12">
                <img src="images/logo.png" style="width: 180px;" />
            </div>
        </div><br />
        <div class="row">
            <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-6 col-xs-10 col-xs-offset-1">
                <form method="post">
                    <h4 class="form-login-heading">User Log In</h4><hr />
                    <div class="form-group input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-tag"  ></i></span>
                        <input class="form-control" type="text" id="user_name"  name="user_name" placeholder="Username" required />
                    </div>
                    <div class="form-group input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"  ></i></span>
                        <input class="form-control" type="password" id="pass_word"  name="pass_word" placeholder="Password" required/>
                    </div>
                    <hr />
                    <div class="form-group">
                        <button type="submit" class="btn btn-default" name="btnLogin" id="btnLogin">
                        <span class="glyphicon glyphicon-log-in"></span> &nbsp; Sign In
                        </button> 
                    </div> 
                </form>   
            </div>
        </div>         
</div>
<?php include('include/footer.php');?>
<div class="insert-post-ads-1" style="margin-top:20px;">
</div>
</div>
</body></html>

Answer 1

Recently, Google Chrome has been updated. 最近，谷歌浏览器已更新。 On this update, it doesn't read the <input type="button"> or <button type="submit"></button> when submitted thru AJAX ( like how IE, Edge and other browsers ). 在此更新中，通过AJAX提交时（ 例如IE，Edge和其他浏览器的方式 ），它不会读取<input type="button">或<button type="submit"></button> 。

What you can do is to append manually the button name to your serialized data: 您可以做的是将按钮名称手动添加到序列化数据中：

var formData = $('form').serialize();
    formData.append('btnLogin', true);

And on your AJAX: 在您的AJAX上：

....
    url: "query/login_query.php", /* DIRECTORY AND FILE WHERE YOU WILL SUBMIT THE DATA */
    type: "POST", /* TRY USING TYPE INSTEAD OF METHOD */
    data: formData, /* DATA TO PASS ON */
....

为什么我无法通过使用Ajax的查询连接到数据库？

问题描述

1 个解决方案

解决方案1
0 2017-02-03 07:16:03

为什么我无法通过使用Ajax的查询连接到数据库？

问题描述

1 个解决方案

解决方案1 0 2017-02-03 07:16:03

解决方案1
0 2017-02-03 07:16:03