使用Ajax提交表單

Question

我正在為網站制作用戶腳本，我的目標是在尚未打開的頁面上提交表單。 如果我使用要提交的表單從頁面中刪除所有不需要的位，則剩下的內容（檢查鏈接）：

<form action="http://foo.com/supply/" method="POST" name="supplyContractForm">
<input type="hidden" name="supplyContractData[selected][]" value="2244068">
<input type="type" name="supplyContractData[party_quantity][2244068]" value="123">  
<input type="text" value="0" name="supplyContractData[quality_constraint_min][2244068]">
<input type="submit" name="applyChanges">
</form>

這一切都與第三行有關：帶有'value =“ 123”'。 我想將該值更改為“ 222”。 我該怎么做：我將輸入值從“ 123”更改為“ 222”，按下提交按鈕，然后表單提交：頁面重新加載，顯示的值為“ 222”。 正是我想要的。

現在，所有這些都是手動的，我希望將其編寫為腳本。

這有效：

$("input:submit").click();

但是，這不起作用：

$("form").submit();

而且這也不起作用：

$.post($("form").attr("action"), $("form").serialize())

如何使用Ajax來發布此表單，從而可以從http://foo.com/main/更改值？

注意：我只能在客戶端執行操作，我只是在編寫用戶腳本，而看不到服務器端代碼。

Answer 1

這可以解決問題

HTML，請注意清潔器js的添加類：

<form action="http://foo.com/supply/" method="POST" name="supplyContractForm">
    <input type="hidden" name="supplyContractData[selected][]" value="2244068">
    <input class="changer" type="type" name="supplyContractData[party_quantity][2244068]" value="123">  
    <input type="text" value="0" name="supplyContractData[quality_constraint_min][2244068]">
    <input type="submit" name="applyChanges">
</form>

Js：

$('form input.changer').val('222');
$('input:submit').click();

$（'form'）。submit（）可能不起作用的原因是因為$（'form'）匹配多個元素，即您的html中是否有多個表單？ 如果是這樣，則通過添加ID或類使選擇器更加獨特，從而使所選內容變為：

$('#formid').submit();

阿賈克斯

但是，這不使用ajax，因此您需要：

var form = $('form');
$.ajax({
    url: form.attr('action'),
    type: form.attr('method'),
    data: form.serialize(),
    success: function(){
        alert('Form posted via ajax!');
    }
});