0

我真的对我的代码很生气，所以我对这段代码感到困惑两天。我正在使用 jquery 和 ajax 登录我的用户，但问题是 ajax 无法正常工作，我的登录页面会自动刷新！！当我提交表单时，提交事件会唤醒，但其中的 ajax 代码不起作用！请有人通过这段代码帮助我，我真的很感激。

这是我的 login.php

<!doctype html>
<html>
<head>

    <!-- Basics -->

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Login</title>

    <!-- CSS -->

    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="animate.css">
    <link rel="stylesheet" href="login.css">
    <link rel="stylesheet" type="text/css" href="reg.css"/>
    <script src="./jqlib/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
    <script>
    $(document).ready(function(){
        $("#login").submit(function()
        {



            $.ajax({

                url: 'loginopr.php',
                 type: 'POST',
                 dataType: 'html',
                    data:"phone="+$('#phone').val()+"&password="+$('#password').val(),
                success:function(response){
                    if(response == "2")
                        alert("شماره تلفن یا رمز عبور وارد شده اشتباه می باشد");

                    else{ if(response=="3")
                        alert("لطفا اطلاعات را به طرز درست وارد کنید");
                        }

                    }


                    });


    });



    }); 





    </script>



</head>

    <!-- Main HTML -->

<body>

    <!-- Begin Page Content -->

    <div id="container">

        <form  method="POST">

        <label for="name">تلفن همراه :</label>

        <input type="tel" required="" title="لطفا شماره همراه خود را به صورت صحیح وارد نمایید" x-moz-errormessage="لط
        فا شماره همراه خود را به صورت صحیح وارد نمایید" name="phone" id="phone">

        <label for="username">رمز عبور :</label>

        <input  type="password" required="" id="password" title="رمز عبور را وارد کنید" x-moz-errormessage="رمز عبور را وارد کنید" name="password">

        <div id="lower">

        <input type="checkbox"><label class="check" for="checkbox">مرا بخاطر بسپار</label>


        <input type="submit" value="ورود" id="login" ><br />
        <a style=" float: right; clear:both; margin-right: 10px;margin-bottom:10px; text-decoration: blink;" href="register.php">ثبتنام نکرده ام</a>
        </div>

        </form>
        <div class="footer">
            <div>
                    <a href="http://hameja123.ir">همه جا 123</a>
            </div>
                    کلیه حقوق این سایت محفوظ بوده و متعلق به
                    <a href="http://hameja123.ir">همه جا 123</a>
                    می‌باشد.
            <div style="direction:ltr; color: #ffffff;">hameja.ir - Copyright © 2013 - All rights reserved by Reza Tanzifi.</div>

        </div><!--end footer-->
    </div>


    <!-- End Page Content -->




</body>

</html>

这是我的 loginopr.php

<?php

include_once 'includes/function.php';
include_once 'user.php';
$user = new User();
if ($_SERVER["REQUEST_METHOD"] == "POST")
    {
        if(isset($_POST['phone']) && isset($_POST['password']) )
        {
            $phone = mysql_real_escape_string($_POST['phone']);
            $password = mysql_real_escape_string($_POST['password']);

        $login = $user->check_login($phone, $password);
            if ($login)
             {
// Login Success
                 header("location : buy-charge.php");

             }
        else
             {
        // Login Failed
                return 2;
             }
        }
    else {
        //field are empty
        return 3;
         }
    }
?>

我认为问题出在我的 ajax 代码及其关于客户端的问题上，我正在等待您的回答，非常感谢；）

4

4 回答 4

2

当您单击提交按钮时，它应该提交，无论您是否在其上附加了 AJAX。要解决此问题，请更改$("#login").submit(function(){...});为

   $("#login").click(function(event){

        event.preventDefault(); // cancel the default action, i.e submiting the form

        // proceed to your AJAX:
        ... 

    });

也更改return为echo您的 PHP 部分。这result是页面上看到的内容，我的意思是那里打印的内容，包括所有 html、文本等。

正如这里已经说过几次

data: { 
    phone : $('#phone').val() , 
    password : $('password').val()
}
于 2013-08-15T08:30:07.883 回答
1

提交表单时，不是$('#login').submit();您的脚本告诉它提交表单，如果您想运行 ajax，它应该是：

$('#login').click(function(){

   //your ajax script here

  //to stop sending your form
  event.preventDefault();

});

和

在将数据变量传递给您的 php 时，我应该建议您应该是这样的：

data: { 
 phone : $('#phone').val() , 
 password : $('password').val()
}

并在您的 php 中返回您对 ajax 的响应时，您应该echo这样做

echo '2'; // or echo 'invalid';
于 2013-08-15T08:23:13.370 回答
0 
$("#login").submit

#login 必须是表单

<form  method="POST" id='#login'>
...
...
</form>
于 2013-08-15T08:19:48.450 回答
0

尝试这个 。我已经更改了您的前端代码。

<!doctype html>
<html>
<head>

    <!-- Basics -->

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Login</title>

    <!-- CSS -->

    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="animate.css">
    <link rel="stylesheet" href="login.css">
    <link rel="stylesheet" type="text/css" href="reg.css"/>
    <script src="./jqlib/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
    <script>
    $(document).ready(function(){
  $("#login").click(function(){
    $.ajax({url:'loginopr.php',
            type:"POST",
            dataType: 'html',
          data:
              {
               "phone":$('#phone').val(),
               "password":$('#password').val()
               },
         success:function(response){
        if(response == "2")
               alert("شماره تلفن یا رمز عبور وارد شده اشتباه می باشد");
       else{ if(response=="3")
                       alert("لطفا اطلاعات را به طرز درست وارد کنید");
                       }

    }});
  });
});
    </script>



</head>

    <!-- Main HTML -->

<body>

    <!-- Begin Page Content -->

    <div id="container">

        <form  method="POST">

        <label for="name">تلفن همراه :</label>

        <input type="tel" required="" title="لطفا شماره همراه خود را به صورت صحیح وارد نمایید" x-moz-errormessage="لط
        فا شماره همراه خود را به صورت صحیح وارد نمایید" name="phone" id="phone">

        <label for="username">رمز عبور :</label>

        <input  type="password" required="" id="password" title="رمز عبور را وارد کنید" x-moz-errormessage="رمز عبور را وارد کنید" name="password">

        <div id="lower">

        <input type="checkbox"><label class="check" for="checkbox">مرا بخاطر بسپار</label>


        <input type="button" value="ورود" id="login" ><br />
        <a style=" float: right; clear:both; margin-right: 10px;margin-bottom:10px; text-decoration: blink;" href="register.php">ثبتنام نکرده ام</a>
        </div>

        </form>
        <div class="footer">
            <div>
                    <a href="http://hameja123.ir">همه جا 123</a>
            </div>
                    کلیه حقوق این سایت محفوظ بوده و متعلق به
                    <a href="http://hameja123.ir">همه جا 123</a>
                    می‌باشد.
            <div style="direction:ltr; color: #ffffff;">hameja.ir - Copyright © 2013 - All rights reserved by Reza Tanzifi.</div>

        </div><!--end footer-->
    </div>


    <!-- End Page Content -->




</body>

</html>
于 2013-08-15T08:46:04.360 回答