iframe "AJAX"から適切なAJAXに切り替える

Question

これは従来のコードです。 私はiframeを使ってAJAXをシミュレートするプロジェクトに取り組んでいます。

基本的には、target属性を使用してiframeに<form>を送信しているため、新しいタブが開かれないというリクエストが発生しています。また、PHPからの応答に<script></script>をエコーし​​、結果はiframeに入力されるため実行されます。

<form id="form_to_submit" method="POST" action="ajax/createUser" target="iframe_name"> 
    <input type="text" name="input_to_send"> 
    <button type="button" onclick="$('#form_to_submit').submit()">Submit With Onclick!</button> 
</form> 

今日では、これが悪に見えるだけでなく、1（おそらく他の）巨大な落とし穴があります。

はここで、このような<form>の例です。このプロセスを通じて1つのリクエストが行われ、クライアントがどこかに行ってブラウザの履歴に戻ると、リクエストが再度送信されます。

この最後の問題を解決するには、多くの解決策があります。私が最も好むのは、iframeの代わりに実際のAJAXを使うことです。理論的には、AJAXを使用するためにソースコード内のすべての単一フォームを変更することができましたが、私はこの目的のためだけに1週間の作業をしないことを知っています。

これらのリクエストをiframeに送信する前にこれらのリクエストを傍受し、代わりにAJAXで送信するための「迅速な」方法を探しています。

はこれまでのところ、私はtarget="iframe_name"を持っているし、同じ方法/ URL /データと要求を再送信するためにsubmitイベントに耳を傾ける<form>タグをターゲットにしようとしました。

$('form[target=iframe_name]').on('submit', function (event) { 
     event.preventDefault(event); 

     var url = $(this).attr('action'), 
     datas = $(this).serialize(); 

     $.post(url, datas).done(function (response) { 
      eval($(response).text()); 
     }); 
}); 

ただし、送信ボタンを実際にクリックして送信した場合にのみ機能します。私は、これらのケースの95％がonclickタグによって提出され、.submit()のフォームを提出し、これらのケースでは、submitイベントが発生しないと言います。

私は固執していますか？

注：jqueryには、JSのlib/frameworkとまだ関連しているにも関わらず、使用できることを知らせるためにjqueryにタグを付けるだけです。

Answer 1

あなたが実際には、文書準備に関する一般的なjQueryのアクションを実行してonclick属性を削除することができます。

<script> 
$(document).ready(function() { 
    var getButton = $('form').find('button'); 
    getButton.prop('onclick',null); 

    // put listener script here for new form submit (using ajax)... 
}); 
</script> 

のコードのこの作品は、ちょうどすべての形態のためのページ上の一般的な検索を実行し、ボタンを見つけ、 onclick属性を削除します。これを行うと、フォームはそのインラインJavaScriptでもう送信しないでください。

私はあなたがインクリメンタルネイティブ（あなたがいないonclickで作成したフォームの他の5％のような）jQueryのリスナーを使用して動作するように時間をかけてフォームを変更すると、これは一時的なものを示唆しています。