AJAX vs PHP 提交表单

Question

我最初有一个这样设置的表单（CSS 样式已被删除）

<form name="LoginForm" action="login.php" method="post">

<input name="email" id="email" type="text"></input>

<input name="password" id="password" type="password"></input>

<input name="login" id="login" type="submit" value="Login"></input>
</form>

它运行良好，login.php 将验证用户信用。但是，这种方法需要页面重定向。我正在尝试将代码迁移到 AJAX，以便我可以查询登录详细信息并留在页面内。 [编辑] 这是我使用的 AJAX 对象

function Ajax(){
    this.xmlhttp=null;  //code below will assign correct request object
    if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari
        this.xmlhttp=new XMLHttpRequest();
    }
    else{       // code for IE6, IE5
        this.xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    this.stateChangeFunction=function(){};  //user must reimplement this

    var that=this;
    this.xmlhttp.onreadystatechange=function(){ //executes the appropriate code when the ready state and status are correct
        if (this.readyState==4 && this.status==200){
            that.stateChangeFunction();     
        }
        else{
            dump("Error");
        }
    }
}

然后我有一个 login.js 函数，我不太清楚如何合并，目前我将它添加到提交按钮的 onclick 事件中：

function login(email,password){
    var ajax=new Ajax();

    //ajax.xmlhttp.open("GET","login.php?LoginEmailField="+email+",LoginPasswordField="+password,true);
    //ajax.xmlhttp.send();
}

您会注意到最后两行是如何被注释掉的，我现在不太确定如何发送参数，但关键是即使这两行被注释掉，整个站点仍然会重新加载。在表单中使用 AJAX 的正确方法是什么。

谢谢

Answer 1

我没有在原始 js 中做足够多的 ajax 来提供教程，所以我打算使用 jquery。然而我展示的任何东西都可以用原始的 javascript 来完成，所以也许其他人会很友好地向你展示一个原始的实现。

首先，您应该使用 POST 而不是 GET 进行登录。其次，正如我在评论中所说，您应该使用登录页面的实际 URL 作为操作。这样无论出于何种原因没有 JS 的用户仍然可以登录。最好通过绑定到表单onSubmit 事件来做到这一点。

<form name="LoginForm" action="login.php" method="post">

<input name="email" id="email" type="text"></input>

<input name="password" id="password" type="password"></input>

<input name="login" id="login" type="submit" value="Login"></input>
</form>

使用 jquery：

function doLogin(event){
  event.preventDefault(); // stop the form from doing its normal post
  var form = $('form[name=LoginForm]');
  // post via ajax instead
  $.ajax({
    url: form.attr('action'), // grab the value of the action attribute "login.php"
    data: form.serialize(), // converts input fields to a query string
    type: 'post',
    dataType: 'text',
    success: function(data){
      /* callback when status is 200
       * you can redirect here ... data is the response from the server, 
       * send the redirect URL in this response
       */
      window.location.href = data;
    },
    error: function(textStatus){
      alert('ERROR');
    }
  });
}

// bind our function to the onSubmit event of the form
$('form[name=LoginForm]').submit(doLogin); 

然后在服务器端你可以检查它是否是一个基于 ajax 的请求：

<?php

 // do your login stuff

 // set $successUrl to the URL you want to redirect to

 // check if its ajax
 if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) 
   && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
 {
   echo $successUrl;
   exit(0);
 }
 else
 {
    // was a non-ajax request - do a normal redirect
    header('Location: '.$successUrl);
 }

Answer 2

您的代码仅显示HTML。 AJAX 使用 javascript 与 PHP 脚本通信。

所以，只有看到js 代码，才能进行调试。

Answer 3

要避免默认事件，您必须使用 action='javascript: void(null);' 而不是删除它。