从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 开发工具中复制了上述脚本，将 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);
    });
  })
});