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

从ajax返回的html提交表单

1 个答案: