Ajax請求返回頁面的每個html元素

我是Ajax的新手，目前使用php和ajax（用於wordpress插件）進行表單提交。我的js代碼是Ajax請求返回頁面的每個html元素

$("#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「Success message」。任何人可以告訴我如何只輸出PHP驗證結果？

來源

2011-02-06 devdarsh

嘗試包括一個網頁，只得到了結果...顯示該網頁不是頭，菜單等......只有開結果。 – Thew 2011-02-06 11:23:06

對不起，你錯了，可能是因爲我英語不好。 ajax返回頁面中的所有html元素（頭文件，導航等），而只返回php驗證結果。結果，點擊提交按鈕後有兩個標題，兩個導航元素。 – devdarsh 2011-02-06 11:37:23

輸出緩衝可以幫助你

<?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部分W/O標題，導航等，客戶端不應該解析所有的東西，以得到它所需要的東西。

來源

2011-02-06 11:39:49 kirilloid

您可能會在檢查表單數據之後返回，或者在另一個操作中執行表單驗證。

來源

2011-02-06 11:47:28 husseincoder

該代碼示例不完整，但您可以獲得它的希望！添加一個變量來發布數據。

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

來源

2011-02-06 17:23:17 Gutzofter

Ajax請求返回頁面的每個html元素

回答

相關問題