使用AJAX和jQuery提交表單

看起來這應該是jQuery內置的東西，而不需要超過幾行代碼，但我找不到「簡單」解決方案。我說，我有一個HTML表單：使用AJAX和jQuery提交表單

<form method="get" action="page.html"> 
    <input type="hidden" name="field1" value="value1" /> 
    <input type="hidden" name="field2" value="value2" /> 
    <select name="status"> 
     <option value=""></option> 
     <option value="good">Good</option> 
     <option value="bad">Bad</option> 
    </select> 
</form>

當有人更改選擇欄，我想使用AJAX來更新數據庫提交表單。我以爲會有某種方式做，而無需手動創建值/屬性下面，只是把他們所有的，如：

$("select").change(function(){ 
    $.get("page.html?" + serializeForm()); 
});

我缺少什麼？

來源

2009-01-08 Chris Bartow

回覆：更新，你可能不希望這是一個GET請求，因爲你將數據傳遞到服務器。但是，是的，這是一般的想法。歡迎您:) – rfunduk 2009-01-10 19:02:39

以下是我發佈表單數據以在服務器上執行操作的方式http://tryconcepts.blogspot.in/2012/02/post-form-data-using-jquery-post-or.html – yashpal 2012-02-29 13:45:56

這是什麼結束了工作。

$("select").change(function(){ 
    $.get("/page.html?" + $(this).parent("form").find(":input").serialize()); 
});

來源

2009-05-03 15:15:59

有一個不錯的form plugin，它允許你異步地發送一個HTML表單。

$(document).ready(function() { 
    $('#myForm1').ajaxForm(); 
});

或

$("select").change(function(){ 
    $('#myForm1').ajaxSubmit(); 
});

提交表單立即

來源

2009-01-08 17:18:44

謝謝！這個插件真棒！ – Rich 2017-11-17 15:21:56

133

首先給你的形式id屬性，然後使用如下代碼：

$(document).ready(function() { 
    var form = $('#my_awesome_form'); 

    form.find('select:first').change(function() { 
    $.ajax({ 
     type: "POST", 
     url: form.attr('action'), 
     data: form.serialize(), 
     success: function(response) { 
     console.log(response); 
     } 
    }); 
    }); 

});

所以這個代碼使用.serialize()從表格中提取相關數據。它還假定你關心的選擇是表單中的第一個。

爲了將來的參考，jQuery docs非常非常好。

來源

2009-01-08 17:28:17 rfunduk

使用AJAX和jQuery提交表單

回答

相關問題