同じページでサーバーと対話したい場合がありますが、フォームを送信した後に別のページに切り替えたくない場合はどうすればよいでしょうか? フォームを送信するにはいくつかの方法があります
コードは次のとおりです。
<form action="/hehe" method="post"> <input type="text" value="hehe"/> <input type="submit" value="upload" id="upload"/> </form>
これは HTML で最も一般的で最も単純なフォーム送信方法ですが、この方法ではページを切り替える必要があるため、同じページ上でサーバーと対話する必要があり、送信後に別のページに切り替えたくない場合があります。フォームを送信するには、次のような方法があります。
まず、曲線を通じて国を救うためのソリューションを紹介します。上記のコード スニペットを変更する必要はありません。次のコードを追加するだけです。
<iframe id="uploadFrame" name="uploadFrame"></iframe>
簡単に説明すると、実際、ここのフォームは送信後に更新されますが、なぜページにジャンプしないのでしょうか?実際、iframe で更新したのですが、iframe が空になっているためです。これは、更新がないことを意味します。これは非同期的な方法です。もちろん、この方法は多くの場合に適用できません。完了したフォームを送信した後にサーバーから取得したいと考えていますが、このメソッドは明らかに機能しません。ここでは、真に非同期の送信フォームも必要です。
(2) jqueryの非同期フォーム送信
ここではjquery用のフォーム送信プラグインであるajaxuploadを紹介します
コードは以下の通りです
<body> <form action="/hehe" method="post"> <input type="text" value="hehe"/> <input type="button" value="upload" id="upload"/> <!--<input type="button" value="send" onclick="send()"/>--> </form> <script> (function(){ new AjaxUpload("#upload", { action: '/hehe', type:"post", data: {}, name: 'textfield', onSubmit: function(file, ext) { alert("上传成功"); }, onComplete: function(file, response) { } }); })(); </script> </body>
HTML での非同期ファイルアップロードのサンプル分析に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。