Question

我是Ajax的新bie，目前使用php和ajax（用于wordpress插件）进行表单提交。我的js代码是

$("#submit").click(function(){   
var form_data = $('.myform').serialize();
$.ajax({
  type: "POST",
  url:  "main_form.php",
  data: form_data,
  success: function(html){
  $('div#ajax_output').html(html);
   }                       
}); 
return false;
  });

我的整个页面结构看起来像

<div class="header"> ....</div>
<div class="navigation"> ....</div>
< ?php
if($_post) {
   //form validation codes
   if(condition true) echo "Success message";
   else echo "Error";
}
?>
<div id="ajax_output"></div>
<form class="myform">
  //form elements
</form>
 //And the above javascript here(that click fn)

现在我的问题是，因为我正在将表单数据提交到同一页面（这是不可避免的并且无法使其分离），ajax会在<div id="ajax_output"></div>内部返回所有页面内容标题，导航等，包括echo “成功信息”。谁能告诉我如何只输出php验证结果？

Answer 1

输出缓冲可以帮助你

<?php // insert that at the beginning of the page
    ob_start();
?>
<div class="header"> ....</div>
<div class="navigation"> ....</div>
<?php
if($_post) {
   //form validation codes
   if(condition true) echo "Success message";
   else echo "Error";
   ob_end_clean();
   exit(1);
} else {
   echo ob_get_clean();
}
?>
<div id="ajax_output"></div>
<form class="myform">
  //form elements
</form>
 //And the above javascript here(that click fn)

但是，您最好重新构建代码。即将发布数据处理移到页面的开头，然后退出，如果应该处理它。

通常，这些问题在服务器端解决，而不是在javascript中解决。我的意思是，服务器应该返回没有标题，导航等的正确html部分，客户端不应该解析所有这些东西以获得它需要的东西。

Answer 2

您可以在检查表单数据后返回，或者在另一个操作中执行表单验证。

Answer 3

代码示例不完整，但您可以充分了解它的要点！添加变量以发布数据。

使用Javascript：

$("#submit").click(function(){   
   var form_data = $('.myform').serialize();

   form_data.isAjax = true;

   $.ajax({
      type: "POST",
      url:  "main_form.php",
      data: form_data,
      success: function(html){
         $('div#ajax_output').html(html);
      }                       
   }); 
   return false;
});

PHP：

<?php

if(array_key_exists("isAjax", $_POST) {
   if($_post) {
      //form validation codes
      if(condition true) {
         echo "Success message";
      }
      else {
         echo "Error";
      }
   }
}
else {
   $mainPage = '<div class="header"/>>';
   $mainPage += '<div class="navigation"/>';
   $mainPage += '<div id="ajax_output"/>';
   $mainPage += '<form class="myform"/>';
   $mainPage += '<javascript />';

   echo $mainPage;
}

Ajax请求返回页面的每个html元素

3 个答案: