Ajax-запрос возвращает каждый HTML-элемент страницы

Question

Я новичок в Ajax и в настоящее время делаю отправку форм, используя 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> весь заголовок содержимого страницы, навигацию и т. д., включая эхо «сообщение об успехе».Кто-нибудь может сказать мне, как вывести только результат проверки 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

Пример кода не завершен, но, надеюсь, вы сможете понять его суть!Добавьте переменную для публикации данных.

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;
}

Answer 3

Вы можете вернуться после проверки данных формы или выполнить проверку формы в другом действии.