我正在尝试提交嵌入在 AJAX 请求的 HTML 响应中的表单,但似乎无法真正提交该表单。
我有这样的东西:
// get the cart page
jQuery.ajax({
type: "GET",
url: "cart.asp"
}).success(function(cartHTML) {
// build dom tree, and make it parsable
var parser = new DOMParser();
var doc = parser.parseFromString(cartHTML, "text/html");
// set sku qty to zero and resubmit form which recalculates totals
doc.getElementById('someProduct').value = 0;
// this does not work, yet returns no error
// the form does indeed exist in `doc`
doc.forms['recalculate'].submit();
// now get the checkout page again
jQuery.ajax({
type: "GET",
url: "checkout.asp"
}).success(function(checkoutHTML) {
// fetches and replaces totals with updated values, etc.
updateCheckoutPageTotals(checkoutHTML); // this works, used in other places
});
});
上面的脚本运行没有错误,但是第二个 ajax 请求的返回值与之前没有变化。预期结果是从购物车中删除特定产品,因此返回更新后的总计,但不包含该产品。
我已经验证返回的 cartHTML
变量确实包含购物车的 HTML 页面,并且 doc.getElementById('someProduct').value = 0;
确实设置了该输入元素的表单值为零。
我还在 Chrome Dev Tools 中复制了上述脚本,将 ajax 响应数据分配给全局变量并将其解析为文档树,并尝试以这种方式提交表单,但也没有成功。只需在控制台上执行 doc.forms['recalculate'];
即可返回正确的表单,并将 someProduct
的值正确设置为零。
在 cart.asp
页面上直接在没有 ajax 的情况下执行上述操作,然后通过 javascript 提交表单确实有效 - 我认为我可以通过 ajax 从结帐页面模拟它来制作东西对客户来说更容易,但是像我上面那样提交表单似乎没有效果。
我做错了什么吗?
最佳答案
使用 DOMParser 你会得到一个只存在于内存中的全新文档,你不能真正触发事件或用它做很多其他事情。
要提交的表单必须添加到 DOM,即当前文档,以便浏览器可以重定向并在提交时发送数据
似乎您不会重新加载页面,而是使用 ajax 代替表单
// get the cart page
jQuery.ajax({
type: "GET",
url: "cart.asp"
}).done(function(cartHTML) {
var html = $(cartHTML);
// set sku qty to zero and resubmit form which recalculates totals
html.find('#someProduct').val("0");
var form = html.find('name="recalculate"]');
jQuery.ajax({
type : "GET",
url : form.attr('action'),
type : form.attr('method'),
data : form.serialize()
}).done(function() {
// form submitted
jQuery.ajax({
type: "GET",
url: "checkout.asp"
}).done(function(checkoutHTML) {
updateCheckoutPageTotals(checkoutHTML);
});
})
});
关于javascript - 从 ajax 返回的 html 提交表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46373952/