从ajax提交表单返回的html [英] Submit a form from ajax returned html

问题描述

我正在尝试提交一个嵌入在 AJAX 请求的 HTML 响应中的表单，但似乎无法让表单实际提交.

I'm attempting to submit a form that's embedded in the HTML response of an AJAX request, but can't seem to get the form to actually submit.

我有类似的东西:

    // 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请求的返回值和之前没有变化.预期结果是从购物车中删除特定产品，因此返回更新后的总计，不含此产品.

The above script runs without error, but the returned values from the second ajax request do not change from before. The expected result is to remove a particular product from the cart, and therefore return updated totals, without this product.

我已经验证返回的 cartHTML 变量确实包含购物车的 HTML 页面，并且 doc.getElementById('someProduct').value = 0; 确实设置了该输入元素的表单值为零.

I've verified the returned cartHTML variable does indeed contain the cart's HTML page, and doc.getElementById('someProduct').value = 0; does set the form value to zero for that input element.

我还在 Chrome Dev Tools 中复制了上述脚本，将 ajax 响应数据分配给全局变量并将其解析为文档树，并尝试以这种方式提交表单，但也没有成功.只需在控制台上执行 doc.forms['recalculate']; 确实会返回正确的表单，并且 someProduct 的值正确设置为零.

I've also replicated the above script in Chrome Dev Tools, assigning the ajax response data to a global variable and parsing it into a document tree, and attempted to submit the form this way without success either. Simply executing doc.forms['recalculate']; on the console does return the correct form, with the value of someProduct set correctly to zero.

直接在 cart.asp 页面上执行没有 ajax 的上述操作，然后通过 javascript 提交表单确实有效 - 我想我可以通过结帐页面中的 ajax 模拟它来制作东西对客户来说更容易，但像我上面所做的那样提交表单似乎没有任何效果.

Performing the above action without ajax directly on the cart.asp page and then submitting the form via javascript does indeed work - and I thought I could emulate that via ajax from the checkout page to make things easier for the customer, but submitting the form as I've done above, has no effect it seems.

我做错了什么吗?

推荐答案

使用 DOMParser，您将获得一个仅存在于内存中的全新文档，您无法真正触发事件或使用它做很多其他事情.

Using the DOMParser you get a whole new document that only exists in memory, and you can't really trigger events or do much else with it.

要提交的表单，必须添加到 DOM，即当前文档，以便浏览器可以重定向并在提交时发送数据

A form that is to be submitted, must be added to the DOM, i.e. the current document, so the browser can redirect and send the data on submit

似乎您不会重新加载页面，而是将 ajax 用于表单

Seems like you don't won't to reload the page, but use ajax for the form instead

// 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！