使用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!');
    }
});