2017-09-22 19 views
1

AJAXリクエストのHTMLレスポンスに埋め込まれているフォームを送信しようとしていますが、実際にフォームを送信するようには見えません。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 
     }); 
    }); 

を上記のスクリプトはエラーなしで実行されますが、2番目のAJAX要求から返された値は、前から変わりません。予想される結果は、カートから特定の製品を取り除き、したがってこの製品なしで更新された合計を返すことです。

返されたcartHTML変数が本当にカートのHTMLページを含んでおり、doc.getElementById('someProduct').value = 0;がその入力要素のフォーム値をゼロに設定していることを確認しました。

また、私はChrome Dev Toolsで上記のスクリプトを複製し、グローバル変数にajaxレスポンスデータを割り当て、それをドキュメントツリーに解析し、フォームをこの方法で成功裏に提出しようとしました。単にコンソールでdoc.forms['recalculate'];を実行すると、正しいフォームが返され、someProductの値は正しくゼロに設定されます。

cart.aspページで直接ajaxを使用せずに上記の操作を実行してからjavascriptでフォームを送信すると、本当にうまくいく - 私はチェックアウトページからajax経由でエミュレートできると思っていましたが、私は上記のようにフォームは、それはないようです。

何か間違っていますか?

答えて

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

は、私はそれは、AJAXを介して行われなければならず、ネイティブフォームを送信することはできません。ページのリダイレクトはここでは機能しません。顧客がチェックアウトページで特別な商品をカートから取り出して、リフレッシュ/リダイレクトせずに便利に使用できるようにする。 – SnakeDoc

+0

さて、 'submit'を呼び出す必要はありません。フォームだけを提出するだけですから? – adeneo

+0

私のベストコースのように思えますが、投稿を構築してフォームのアクション属性に直接ajaxで送信する方法を理解することです。より簡単な方法を望んでいた...それは私がサーバ側のもので悩む人にアクセスできるプラットフォームではありません。 – SnakeDoc

関連する問題