2012-10-03 42 views
0

我不知道爲什麼我沒有得到它。無論哪種方式,這是令人沮喪的我無法相信。我已經瀏覽了2本jQuery書籍,網絡教程和堆棧溢出文章,但我仍然不明白。我如何使用jQuery-ajax提交表單數據?

我試圖建立一個搜索過濾器酒吧,在那裏用戶可以選擇過濾器,並在單擊「優化結果」它修改查詢輸出。

如何提交取其形式的無線電盒用戶選擇使用jQuery/AJAX到PHP頁面將顯示取決於輸入結果的價值,而無需刷新頁面。

  1. 表 - >
  2. 用戶選擇單選按鈕值和點擊提交 - >
  3. 形式數據被通過jQuery/AJAX發送到其輸出將要被顯示在沒有頁面刷新的PHP頁面 - >
  4. PHP文件處理用戶輸入並在此基礎上

我老老實實地通過不同的答案很多,但看着他們都假設讀者有JavaScript的一個更大的基本知識創建輸出/ jquery比 我做。

一樣,我必須把jQuery的/阿賈克斯運行我的提交按鈕「的onclick」的功能?或者我只是爲我的按鈕ID添加一個.click事件處理程序?

有人能一切向我解釋,假設我是一個完整的jQuery/AJAX小白?

+4

查看jQuery ajax:api.jquery.com/jQuery.ajax/和事件綁定在同一個站點上。他們正在展示基本的例子。據我所知,閱讀文檔和初學者圖書是不能做到的。如果您在理解JavaScript時遇到困難,您也必須查看一些書籍或在線資源。 – Nope

+0

你有沒有使用JavaScript的經驗? – tftd

+0

我在基本語法,製作/調用函數,引用部分DOM等方面有我基本的經驗,我希望這會足夠......但也許在js中一個弱基礎使得jquery/ajax理解在此時站不住腳 – user1299028

回答

2

你只需要你的Ajax調用附加到來自於形式「提交」事件被點擊提交按鈕:

$('form').submit(function(e){ 
    e.preventDefault(); 
    $('.content').load(this.action+" .content", $(this).serialize(), function(){ 
     // code to execute after result display if needed 
    }); 
    return false; 
}); 

我假定你的結果會顯示在具有一個元素「內容「類。

  1. $('form')選擇你的表格,你可以個性化它
  2. .submit附加一個事件處理程序的形式「提交事件
  3. e.preventDefault()return false防止被實際提交
  4. $('.content').load將填補該元素的形式與「內容」類的阿賈克斯調用結果
  5. this.action是提交表格的網址
  6. " +.content"是此處從響應中提取的,而不是整個HTML頁面
  7. $(this).serialize()只有結果部,表單字段數據傳遞到AJAX請求
  8. 最後顯示結果後的最後一個匿名函數被調用並能用於觸發一些視覺效果,指示結果已更新
+0

這正是我需要的。現在一切都更清楚了,謝謝! :) – user1299028