使用Javascript/Ajax加载新页面


Loading a new page with Javascript/Ajax

我有一个Ajax脚本,它允许我在不刷新页面的情况下检查表单。但我想让它检查字段是否还没有完成,但如果所有字段都完成了,我想把用户发送到一个新页面。

我不知道我该怎么做。这是Ajax脚本:

function pass() 
{
// Real Browsers (chrome)
if (window.XMLHttpRequest) 
{
    xhr = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) 
{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//Store data
var email = document.getElementById('email').value;
var firstname = document.getElementById('firstname').value;
var surname = document.getElementById('surname').value;
var address1 = document.getElementById('address1').value;
var address2 = document.getElementById('address2').value;
var postcode = document.getElementById('postcode').value;
//Open POST location
xhr.open("POST","addUserSeminar.php");
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
//Make object to store all data
var obj = {email: email, firstname: firstname, surname: surname, address1: address1, address2: address2, postcode: postcode};
//Encode the data with JSON and send it to the server
xhr.send("data=" + JSON.stringify(obj));
//Check return state and change "myDiv"
xhr.onreadystatechange=function() 
{
    if (xhr.readyState==4) 
    {
        document.getElementById("settingsDiv").innerHTML = xhr.responseText;
    }
}
//Return false so form doesn't submit
return false;
}

它将数据发送到一个php文件,在那里我检查框是否已填充,如果未填充,我会向每个框发送一条类似"Name not found"的消息。但如果所有数据都发布了,那么我会在数据库中添加一条记录,然后返回true。

我怎么能在Ajax脚本中得到这个返回,这样我就可以测试它是否为真,如果是的话,可以转发到新页面。

谢谢你抽出时间。

从服务器返回表示它已完成的内容,并在if语句中使用xhr.responseText读取它。

if( xhr.responseText.indexOf("forward to next page") > -1 ){
    //forward
} else {
   //show error message
}

如果您使用JSON对象来返回错误和成功消息,效果会更好,因为您只需检查对象即可。

在onreadystatechanged中,readyState==4 if block。。。

if(xhr.responseText.indexOf("SUCCESS") >= 0) {
    window.location.href = NEW_URI;
} else {
    document.getElementById("settingsDiv").innerHTML = xhr.responseText;
}

让PHP脚本返回一个唯一的字符串,用空白字段表示SUCCESS vs FAILURE。

成功时从服务器端返回字符串"TRUE"

PHP代码

if($valid_inputs) { // all input fields are valid
   echo "TRUE";
} else {
   echo "FALSE";
}

客户端JS代码

if (xhr.readyState==4) 
{
    if (xhr.responseText.indexOf("TRUE") > -1) {
      window.location = "redirecturl.php"; //redirect url
    }
}