堆棧內存溢出
  簡體   English   中英

AJAX用戶登錄不起作用

[英]AJAX user login not working

 原文  2013-08-15 08:14:49  2   4    javascript/ jquery

問題描述

我真的很生氣我的代碼，所以我對這個代碼感到困惑兩天。 我正在使用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 個解決方案

解決方案1
 2 已采納  2013-08-15 08:30:07

當您單擊“提交”按鈕時，它應該提交，無論您是否在其上附加了AJAX都沒關系。 要解決此問題，請更改$("#login").submit(function(){...}); 至 

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

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

        // proceed to your AJAX:
        ... 

    });

還要在您的PHP部分更改return to echo 。 這里的result是在頁面上看到的，我的意思是在那里打印的內容以及所有html，文本等。

正如這里已經說過幾次 

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

解決方案2
 1  2013-08-15 08:23:13

提交表格時不是$('#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';

解決方案3
 0  2013-08-15 08:19:48

$("#login").submit

#login必須為表格 

<form  method="POST" id='#login'>
...
...
</form>

解決方案4
 0  2013-08-15 08:46:04

嘗試這個 。 我已經更改了您的前端代碼。 

<!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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Ajax無法用於登錄檢查 PHP-AJAX登錄無法正常工作 AJAX登錄表單無法正常工作 Ajax + PHP登錄腳本不起作用 AJAX登錄腳本不再起作用 使用 AJAX 和 PHP 登錄時獲取用戶配置文件 通過JS和Ajax驗證用戶登錄 使用Phonegap，AJAX，PHP和MySQL登錄不起作用 PHP 登錄表單中的簡單 Ajax 不起作用 JavaScript Ajax請求登錄PHP頁面不起作用
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM