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

フォームデータを確認した後に戻るか、別の操作でフォームの検証を行うことができます。

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