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，以便我可以查询登录详细信息并保留在页面内。 [edit]这里是我使用的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);'而不是删除它。

AJAX vs PHP提交表单

3 个答案: