從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正確設置爲零。

在沒有ajax的情況下直接在cart.asp頁面上執行上述操作，然後通過javascript提交表單確實有效 - 我想我可以通過結賬頁面上的ajax來模擬，以使客戶更容易，但是提交就像我上面所做的那樣，看起來沒有任何效果。

我做錯了什麼？

Answer 1

使用DOMParser，您會得到一個只存在於內存中的全新文檔，而且您無法真正觸發事件或對其執行其他操作。

一種形式，應提交，必須添加到DOM，即當前文檔，使瀏覽器可以重定向和發送數據上提交

好像你不也不會重新加載該頁面，但使用阿賈克斯的形式，而不是

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