ajax jQuery的概念在php

我想在我的應用程序中使用ajax jquery概念，這對我來說是新的。我已經寫出了代碼。但沒有得到確切的輸出。我的代碼是這樣的：ajax jQuery的概念在php

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
<form name="ajax" id="ajax" method="post" action=""> 
Username: <input type="text" name="username" id="username" /><br /> 
Password: <input type="text" name="pass" id="pass" value="" /><br /> 
<input type="submit" name="sub_btn" id="sub_btn" value="Login" /> 
</form> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('#sub_btn').click(function(){ 
    var username = $('#username').val(); 
    var password = $('#pass').val(); 
    var datastring = "username="+username+"&password="+password; 
    $.ajax({ 
    type:"POST", 
    url: "bin/login-process.php", 
    data: datastring, 
    success: function(){ 
    alert("Success"); 
    }, 
    error: function(){ 
    alert("Fail"); 
    } 
    }); 
}); 
}); 
</script>

，並在bin /登錄-process.php文件我只是迴應「你好」。現在，如果我正在嘗試運行此頁面，則會收到警報消息（「失敗」），但這是非常短的時間，並且會再次重定向到同一頁面。但是我不想在用戶點擊「確定」按鈕之前消失警報消息。

來源

2012-12-26 phpdeveloper

有兩種方法解決這個問題。

1.改變按鈕類型爲「鍵」

<input type="button" name="sub_btn" id="sub_btn" value="Login" />

2。修改您單擊處理

$(document).ready(function(){ 
    $('#sub_btn').click(function(event){ 
     event.preventDefault();

原因： 當您添加一個提交按鈕，表單，點擊按鈕觸發提交事件，因此提交的表格所提供的行動，你的情況您希望使用Ajax提交表單，以便通過添加event.preventDefault()來防止默認行爲，這意味着您正在阻止該事件的默認操作。

建議：

取而代之的是按鈕的點擊掛鉤事件，勾提交表單的事件，畢竟人們還可以提交您的形式，而是打「回車」鍵。這將適用於鼠標點擊和鍵盤輸入鍵。

$(document).ready(function(){ 
    $('#ajax').submit(function(event){ 
     event.preventDefault();

來源

2012-12-26 12:46:05

改變你的按鈕類型從提交按鈕這樣

<input type="button" name="sub_btn" id="sub_btn" value="Login" />

，因爲這是正常的POST方法提交表單，這就是爲什麼你的網頁被重定向。

檢查返回的輸出寫你的成功的功能這樣

success: function(response){ 
    alert("Success :"+response); 
}

來源

2012-12-26 12:27:19

只需更新你這樣的點擊處理函數：

$('#sub_btn').click(function(e){ 
    e.preventDefault(); 
    ....//all your other code here.

這裏的問題是你不停止默認的動作是形式提交。關於preventDefault的一些詳細信息

另一個選項是在您點擊功能的末尾添加return false;。

我收到警報消息（「失敗」），但是當您單擊按鈕是一個非常非常短的時間

，執行你的功能和Ajax請求開始。但是，您不會像往常一樣停止默認操作（提交）和瀏覽器提交表單。這會終止執行您的ajax調用，導致調用錯誤回調。

來源

2012-12-26 12:27:28

非常感謝。它的工作現在。 – phpdeveloper

請注意，成功函數被稱爲成功HTTP（200），所以你必須拋出http錯誤（例如未經授權的），以獲得錯誤回調，這是一個更常規的方式，是通過在服務器輸出JSON，沿着線的東西：

$response['Success'] = false; 
if ($user = User::tryLogin($username, $password)){ 
    $response['Success'] = true; 
} 
echo json_encode($response);

和jQuery的成功的功能，你需要沿着線路做一些事情：

$('#sub_btn').click(function(){ 
    var username = $('#username').val(); 
    var password = $('#pass').val(); 

    $.post("bin/login-process.php", {username : username, password : password}, function(data){ 
    if (data.Success){ 
    // login success 
    } 
    else{ 
    // login failed 
    } 
    },"json"); 
});

來源

2012-12-26 12:35:58

使用：

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
    <form name="ajax" id="ajax" method="post" action=""> 
    Username: <input type="text" name="username" id="username" /><br /> 
    Password: <input type="text" name="pass" id="pass" value="" /><br /> 
    <input type="button" name="sub_btn" id="sub_btn" value="Login" /> 
    </form> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
    $('#sub_btn').click(function(){ 
     var username = $('#username').val(); 
     var password = $('#pass').val(); 
     var datastring = $('#ajax').serialize(); 
     $.ajax({ 
     type:"POST", 
     url: "bin/login-process.php", 
     data: datastring, 
     success: function(responce){ 
     alert("Success :"+ responce); 
     }, 
     error: function(){ 
     alert("Fail"); 
     } 
     }); 
    }); 
    }); 
    </script>

來源

2012-12-26 12:59:59

ajax jQuery的概念在php

回答

相關問題