0

我正在尝试在我的应用程序中使用 ajax jquery 概念，这对我来说是新的。我已经写出了代码。但没有得到准确的输出。我的代码是这样的：

<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/login-process.php 文件中，我只是回显“hello”。现在，如果我尝试运行此页面，我会收到警报消息（“失败”），但时间很短，它会再次重定向到同一页面。但是在用户单击“确定”按钮之前，我不想消失警报消息。

4

5 回答 5

2

像这样将按钮类型从提交更改为按钮

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

因为这是使用普通的 POST 方法提交您的表单，这就是您的页面被重定向的原因。

为了检查返回的输出，像这样写你的成功函数

success: function(response){
    alert("Success :"+response);
}
于 2012-12-26T12:27:19.543 回答
1

您有两种方法可以解决此问题。

1.将按钮类型更改为“按钮”

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

2.修改你的点击处理程序

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

原因： 当您向表单添加提交按钮时，单击该按钮会触发提交事件，因此将表单提交到提供的操作，在您的情况下，您想使用 Ajax 提交表单，因此您应该通过添加事件来防止默认行为。 preventDefault()这意味着您正在阻止事件的默认操作。

建议：

与其挂钩按钮的单击事件，不如挂钩表单的提交事件，毕竟人们也可以提交您的表单，但按“Enter”键。这适用于鼠标单击和键盘 Enter 键。

$(document).ready(function(){
    $('#ajax').submit(function(event){
        event.preventDefault();
于 2012-12-26T12:46:05.023 回答
0

只需像这样更新您的点击处理程序函数：

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

这里的问题是您没有停止表单提交的默认操作。关于preventDefault的一些细节

另一种选择是return false;在您的末尾添加单击功能。

我收到警报消息（“失败”），但时间很短

当您单击按钮时，您的函数将执行并启动 ajax 请求。但是您不会停止默认操作（提交），浏览器会像往常一样提交您的表单。这会终止您的 ajax 调用的执行，从而导致调用错误回调。

于 2012-12-26T12:27:28.053 回答
0

请注意，在 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-26T12:35:58.120 回答
0

用这个：

<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-26T12:59:59.030 回答