Question

我正在尝试在我的应用程序中使用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文件中我只是回显“你好”。现在，如果我正在尝试运行此页面，我将收到警报消息（“失败”），但这是非常短的时间，它再次重定向到同一页面。但是，在用户点击“确定”按钮之前，我不想消除警报消息。

Answer 1

将按钮类型从提交更改为按钮

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

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

用于检查返回的输出，写下你的成功函数

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

Answer 2

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

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

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

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

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

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

<强>建议：

不是挂钩按钮的点击事件，而是挂钩表单的提交事件，之后所有人也可以提交表单但点击“Enter”键。这适用于鼠标单击和键盘输入键。

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

Answer 3

只需更新点击处理程序功能，如下所示：

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

问题在于您不会停止表单提交的默认操作。有关preventDefault

的一些详细信息

另一个选项是在点击功能结束时添加return false;。

我收到了警告信息（“失败”），但这非常非常短时间

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

Answer 4

请注意，成功函数被称为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");
});

Answer 5

使用此：

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

在php中的ajax jquery概念

5 个答案: