Question

我正在尝试使用PHP和MySQL创建一个简单的登录，我正在使用AJAX（）jquery函数来加载PHP脚本。我想要做的就是在脚本在我的数据库中找到用户时加载一个新的网页（例如java2s.com）。问题是脚本根本不起作用。这是带有Jquery的HTML：

编辑：这是固定代码，感谢所有评论的人，遗憾的是仍然无效。

<!DOCTYPE HTML>
<html>
<head>
<title> Login </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="JavaScript">
function change()
{
document.location.href="http://www.java2s.com";
}

$(document).ready(
$("#loginForm").click(function() {
var jsonlogin=new Object();
jsonlogin.username=$('#username').val();
jsonlogin.password=$('#password').val();
var sendstr = JSON.stringify(jsonlogin);
$.ajax({
        type: 'POST',
        url: 'login.php',
        async: false,
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: sendstr,
        success:function(response){
        if (response['result']=="login successful")
            {
            change();
            }
        }
    });

    })
  )
</script>
</head>
<body>
<h1> INSERT USERNAME AND PASSWORD</h1>
<input type="text" id="username" name="username"> USERNAME <br>
<input type="password" id="password" name="password"> PASSWORD <br>
<input type="submit" id="loginForm" class="button positive">
</body>
</html>

PHP脚本非常简单：

<?php
$data = file_get_contents('php://input');
$result = json_decode($data);
$con=mysqli_connect("localhost","****","*****","*******");
$str="SELECT ID FROM users WHERE username='".$result->username."' AND password='".$result->password."';";
$exists = mysqli_query($con,$str);
if (mysqli_num_rows($exists) ==1)
{
    $arr = array('result'=>"login successful");
    $ris=json_encode($arr);
    echo $ris;
}
else
{
    $arr= array('result'=>"login error");
    $ris=json_encode($arr);
    echo $ris;
}
mysqli_close($con)
?>

当我加载页面并按下提交按钮时，不会发生任何事情。有人可以帮忙吗？非常感谢您提前

Answer 1

尝试这样的事情

$("#loginForm").click(function() {
    var jsonlogin=new Object();
    jsonlogin.username=$('#username').val();
    jsonlogin.password=$('#password').val();
    $.ajax({
        type: 'POST',
        url: 'login.php',
        async: false,
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: jsonlogin,
        success:function(response){
            if (response['result']=="login successful")
            {
                change();
            }
        }
    });
})

已编辑的代码

您尚未正确实施DOM就绪方法

    $(document).ready(function(){
        // code goes here
    });

Answer 2

也许是因为所有的PHP都被注释掉了？

同样在你的成功中，功能应如下所示：

success: function(response){
    dosomethingwithrespones(response);
}

$ .ajax中的数据表示您发送的内容。

Answer 3

为什么你使用函数ajaxJson（） ...尝试删除它，如果你真的想使用它，那么修改你的按钮代码并从jquery中删除$("#loginForm").click(function() { }。 ..

  <input type="submit" id="loginForm" class="button positive" onclick="ajaxJson()">

并更改<script type="text/javascript">而不是<script language="javascript"> ..此标识符不是标准的，此属性已被弃用（更新的结构已过时），而不是类型。

第一种方式

 function ajaxJson()
 {
       //your code goes here without triggering **click** event.. 
 }

 <input type="submit" id="loginForm" class="button positive" onclick="ajaxJson()">

第二种方式

  $("#loginForm").click(function() 
  {
      //your code goes here...
  }

  <input type="submit" id="loginForm" class="button positive">

将所有内容保留在 $（文档）.ready 功能...

之外

希望它可以帮到你

Answer 4

在login.php中尝试此查询，

     $str="SELECT ID FROM users WHERE username='".$result->username."' AND password='".$result->password."' ";

Jquery的：

           $(document).ready(function(){
            $("#loginForm").click(function() {
                var jsonlogin=new Object();
                jsonlogin.username=$('#username').val();
                jsonlogin.password=$('#password').val();
                var sendstr = JSON.stringify(jsonlogin);
                $.ajax({
                        type: 'POST',
                        url: 'login.php',
                        async: false,                         
                        dataType: 'json',
                        data: sendstr,
                        success:function(response){
                        if (response.result=="login successful")
                            {
                             change();
                            }else{
                                alert(response.result);
                                return false;
                            }   
                        }
                    });

                 });
        });

Answer 5

您在代码下面的ready function.try错过了结尾{和}。

<!DOCTYPE HTML>
<html>
<head>
<title> Login </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="JavaScript">
function change()
{
document.location.href="http://www.java2s.com";
}

$(document).ready(function () {
$("#loginForm").click(function() {
alert("hi");
var jsonlogin=new Object();
jsonlogin.username=$('#username').val();
jsonlogin.password=$('#password').val();
var sendstr = JSON.stringify(jsonlogin);
$.ajax({
        type: 'POST',
        url: 'login.php',
        async: false,
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: sendstr,
        success:function(response){
        if (response['result']=="login successful")
            {
            change();
            }
        }
    });

    });
});
</script>
</head>
<body>
<h1> INSERT USERNAME AND PASSWORD</h1>
<input type="text" id="username" name="username"> USERNAME <br>
<input type="password" id="password" name="password"> PASSWORD <br>
<input type="button" id="loginForm" class="button positive">
</body>
</html>

Jquery ajax（）函数不会加载PHP脚本

5 个答案: