AJAX 总是返回主页

Question

有没有人可以帮助我解决我的问题。我有 3 个文件 index.php process.js redirect_process.php。嗯，index.php 是我的主页，里面有一个表格。并且每次单击 button submit 时都会调用 process.js 以验证表单数据，因此，如果输入数据错误，简单地说，不要 return 为真并显示一些错误message, else return 变为 true，然后使用 redirect_process.php 重定向到另一个页面。这是我的 process.js:

代码

$(document).ready(function(){
    $('#form_side').submit(function() { 
  var name_this = /^[a-zA-Z-' ]+$/;
  var return_process = false;
  if(name_this.test(document.getElementById("input_field_one").value) == false){
    alert('Error!');
    return_process = false;
  }else{
    $.ajax({ 
                type:"POST",
                url:"./r_p/redirect_process.php",//the link to call redirect process
                data: $("#my_form").serialize(),
                success: function(response){
                $("#my_form").trigger('reset');
    } });
                //No more validation here, so i want to go into another page now by returning into TRUE
                return_process = true; //This will be the cause now to go to another page.
  }
  return return_process;
 });
});

所以现在可以说输入数据没有错误，我现在想使用 redirect_process.php 重定向到另一个页面。这是我的 redirect_process.php:

代码

...Some validation here
if (data is ok, and no error) {
    //Redirect into correct page
    header('Location: http://localhost/test/correct_page.php'); 
}else{
    //Redirect into wrong page
    header('Location: http://localhost/test/wrong_page.php');   
}

问题是，它总是 return 进入 index.php 而不是在上面的任何 link 中重定向。请我帮助我。谢谢！

Answer 1

应该这样做：

$(document).ready(function(){
    $('#form_side').submit(function(event) { 
  var name_this = /^[a-zA-Z-' ]+$/;
  var return_process = false;
  if(name_this.test(document.getElementById("input_field_one").value) == false){
    alert('Error!');
    return_process = false;
  }else{
    $.ajax({ 
                type:"POST",
                url:"./r_p/redirect_process.php",//the link to call redirect process
                data: $("#my_form").serialize(),
                success: function(response){
                $("#my_form").trigger('reset');
    } });

  } 
      event.preventDefault(); //this line prevents the form from executing it's action, which is none and that triggers a reload.
  return false;
 });
});

您正在通过 jQuery.submit 调用 onsubmit 事件。解析后，此事件会触发表单操作。由于定义了none，因为你使用AJAX，这会触发重新加载。

event.preventDefault()

这会阻止事件触发操作。

 ...Some validation here
 if (data is ok, and no error) {
     //Redirect into correct page
     header('Location: http://localhost/test/correct_page.php'); 
    }else{
     //Redirect into wrong page
      header('Location: http://localhost/test/wrong_page.php');   
  }

header 行有效，但不适用于您的情况。它告诉浏览器加载页面响应。此响应被加载到 AJAX 响应中，而不是重定向当前页面。使用 @Mohamed-Yousef 答案作为指导。

Answer 2

肯定会在您的 index.php 中发生所有事情，因为您在 php 文件中调用 header，您将其与 ajax 一起使用，header 将如果你直接去 redirect_process.php 工作（并且总是在 header(); 之后使用 exit();)

在 php

中做到这一点

...Some validation here
if (data is ok, and no error) {
    echo('OK');
}else{
    echo('Not OK');
}

然后在js中提交事件

$(document).ready(function(){
    $('#form_side').submit(function(e) { 
  e.preventDefault;                              // use e.preventDefault;
  var name_this = /^[a-zA-Z-' ]+$/;
  var return_process = false;
  if(name_this.test(document.getElementById("input_field_one").value) == false){
    alert('Error!');
    return_process = false;
  }else{
    $.ajax({ 
                type:"POST",
                url:"./r_p/redirect_process.php",//the link to call redirect process
                data: $("#my_form").serialize(),
                success: function(response){
                $("#my_form").trigger('reset');
                if(response == 'OK'){
                 window.location.href= "http://localhost/test/correct_page.php";
                 }else{
                 window.location.href= "http://localhost/test/wrong_page.php";
                 }
    } });
                //No more validation here, so i want to go into another page now by returning into TRUE
                return_process = true; //This will be the cause now to go to another page.
  }
  return return_process;
 });
});

AJAX 总是返回主页

AJAX always returning into Home Page

html

javascript

php

ajax

jquery