javascript - 从 ajax 返回的 html 提交表单

Question

我正在尝试提交嵌入在 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 从结帐页面模拟它来制作东西对客户来说更容易，但是像我上面那样提交表单似乎没有效果。

我做错了什么吗？

Answer 1

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