初學者javascript ajax表單幫助

我想請一些幫助瞭解如何做到這一點。我可以將數據從數據庫中提取出來，並使用ajax/javascript編寫東西，但我無法弄清楚如何完成下面的問題。我希望能夠使我的PHP表單提交併更新頁面刷新。

例子。

Page1。主頁 - 自下而上 JavaScript /下拉式變化的Ajax獲取來自第2頁的信息。從第2頁的表格現在在下拉變化時不顯示頁面刷新顯示。當從第二頁提交按鈕被按下時，將表單數據插入Mysql數據庫。將新數據提交到sql數據庫後，表單會在下拉列表中更新並顯示mysql數據庫中特定ID的數據。

Page2。表單下拉式信息。如果數據庫中有數據，表單中充滿了信息。的JavaScript/AJAX按鈕提交使用javascript發送輸入字段到第3頁

第3頁。插入數據到MySQL/AJAX所以沒有頁面刷新需要

感謝

來源

2010-10-25 Eric

你使用任何particualr JS庫（jQuery，Dojo等..），或者你需要在原始JavaScript中做到這一點？ – prodigitalson 2010-10-25 20:02:07

無論如何。爲了做到這一點，我不知道那是什麼。 – Eric 2010-10-25 20:08:12

你完成所有需要循環將表單中的輸入字段打包成查詢字符串，然後將其發送到表單處理頁面。

喜歡的東西

var queryString = ''; 
for(var i = 0; i < document.formName.elements.length; ++i) { 
    queryString += document.formName.elements[i].name + '='; 
    queryString += document.formName.elements[i].value + '&'; 
} 
//trim off the last '&' here

如果你使用的選擇框，你就必須確定他們在上面的循環和不同的一點提取其價值。我在這裏使用的查詢字符串格式是用於POST查詢;在一個GET查詢中，你需要將這個附加到表單處理頁面的url上，用'？'

來源

2010-10-25 20:05:30

我知道該怎麼做。但是，一旦數據庫中的信息發生變化，該如何更新表單呢？ – Eric 2010-10-25 20:10:24

哦 - 你只需要做一些像document.getElementById（'formID'）。innerHTML = xmlHttp.responseText;在ajax函數中。 – 2010-10-25 20:30:24

考慮使用jQuery下面的例子（儘管你可以這樣適應原料JS或不同的JS庫）：

function doSubmit(event) { 
    event.preventDefault(); 
    var $this = $(this); 
    $.ajax({ 
    url: $this.attr('action'), 
    type: 'post', 
    data: $this.serilaize(), 
    success(responseHtml) { 
     // assume responseHtml is the next form 
     var newForm = ajaxifiyForm($('form', responseHtml)); 
     $this.unbind('submit').replaceWith(newForm); 
    } 
    }); 

    return false; 
} 

function ajaxifyForm(form) { 
    return $(form).submit(doSubmit); 
} 

$(document).ready(function(){ 
    ajaxifyForm($('#your-form')); 
});

在這裏，我們靠的第一頁負載已經包括在服務器上的形式側。當DOM準備就緒時，我們將事件處理程序附加到表單的提交事件。這個處理器覆蓋了正常的提交過程，而是使用ajax。它提交給我們在action屬性中指定的URL。

當帖子成功時，它會從該帖子獲取HTML響應，並在應用原始表單上使用的相同處理程序後，用它替換原始表單。這依賴於我們發佈的php腳本始終返回下一個表單並填寫其所有值的假設。

請記住，您可以用這種方式提交文件數據。你需要使用一個iframe作爲中介來做到這一點（還有其他方法可以做到這一點，而不是使用iframe）。你可以谷歌ajax file upload解決這個問題。

來源

2010-10-25 20:26:02 prodigitalson

初學者javascript ajax表單幫助

回答

相關問題