Jqueryクリックボタン非同期および同期コミットフォーム
4066 ワード
最近、jsp学生情報管理システムを開発しています.jspに接触したばかりなので、問題が多いので、ここで皆さんと共有します.
Jquery ajaxがservletの例にフォームをコミット
フロント部分コード:
ajax提出フォームコード:
web.xml構成コード:
addStudents.JAvaコード(POST提出方式を採用):
ajaxコミットフォーム
上の構成で、学生の名前を入力してフォームを提出しましたが、myeclipseのコンソールに名前と文字列「123456789」が印刷されていません.それから、私はクレイジーな検査を始めました.n回検査しましたが、エラーがどこに現れたのか分かりません.偶然に問題を発見しました.私はajaxのコードのブロックの后でalert()文をプラスして、奇迹が现れて、ブラウザは相応の内容を弾いて、myeclipseのコンソールの中で名前と文字列“123456789”を印刷して、これは私にとても困惑させて、大量のブログと公式のドキュメントを调べてから、私はやっとすべてJQuery ajaxの同期と非同期の提出の原因であることを理解しました.まず、JQuery ajaxの方法について説明します.
非同期の理解:コードがajax部分に実行されるとajaxの後の外部コードとともに実行され、ajaxの戻り値に使用する外部コードがあり、ajaxのasync属性がtrue(すなわちajaxが非同期)である場合、後続の外部コードはajaxの戻り値を得ることができず、同期すなわちajaxのasync属性がtrueに設定されている場合にのみ、ajaxセクションを実行した後、後続のコードを実行すると、関係に連続性が発生し、その戻り値が得られます.
それからasyncをfalseに設定して、問題は本当に解決しましたが、alert文を追加して非同期でも名前と文字列を印刷できる理由が分かりませんか?引き続き資料を調べて、私自身の総括は以下の通りです(大牛の指摘を歓迎します):
1、async:trueの場合:コミットボタンをクリックすると、クリックイベントのコード文が実行され、ajaxに実行されると、非同期実行であるため、後の文の実行がブロックされることはありません.後に文がないので、ajaxがクリックイベントを実行して終了しないため、名前や文字列が印刷されない可能性があります.ajaxの後にalert文を追加すると、クリックイベントがブロックされ、ajaxが実行するのに十分な時間があるため、コンソールは名前と文字列を印刷することができます.私は外層のクリックイベントを除去してajaxを直接実行しようとしたが、同期しても非同期でも名前と文字列を印刷することができ、私の推測を証明することができる.2、async:falseの場合:コミットボタンをクリックすると、クリックイベントのコード文も実行され、ajaxに実行されると、同期実行なのでajaxが正常に戻ってから後のコードを実行し続けなければならず、自然と名前と文字列が印刷されます.
もちろんこれらは私個人のいくつかの推測にすぎません.今、私はもっと多くの資料を調べて、私の推測を改善することを証明しています.大牛たちが私の間違いを指摘してくれることを望んでいます.私はきっと謙虚に受け入れます.
最近、本当の原因はajax自体が非同期であることが発見され、ajaxリクエストを開始すると、現在のjsは実行され続け、ajaxを通じてコミットを阻止したい場合は、sumitイベントでajaxを開始することはできません.例えば、
転載先:https://www.cnblogs.com/sunmaer/p/6079623.html
Jquery ajaxがservletの例にフォームをコミット
フロント部分コード:
ajax提出フォームコード:
// ,
$("#addStudents").click(function() {
$.ajax({
url: "addStudents.do",// url
// , , :method=ajax&val=xxx, request.getParameter()
//data:{method:"ajaxTest",val:value},
data: {
name: $("#name").val(),
studentId: $("#studentId").val(),
},
async: true, //
cache: false, //
type: "POST", // POST
dataType: "json", //
success: function(result){ // , result ( json )
if(result){
alert("true");
}else{
alert("false");
}
}
});
});
web.xml構成コード:
This is the description of my J2EE component
This is the display name of my J2EE component
addStudents
org.cms.students.addStudents
addStudents
/addStudents.do
addStudents.JAvaコード(POST提出方式を採用):
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
String name=request.getParameter("name");
System.out.println(name);
System.out.println("123456789");
out.print("false");
}
ajaxコミットフォーム
上の構成で、学生の名前を入力してフォームを提出しましたが、myeclipseのコンソールに名前と文字列「123456789」が印刷されていません.それから、私はクレイジーな検査を始めました.n回検査しましたが、エラーがどこに現れたのか分かりません.偶然に問題を発見しました.私はajaxのコードのブロックの后でalert()文をプラスして、奇迹が现れて、ブラウザは相応の内容を弾いて、myeclipseのコンソールの中で名前と文字列“123456789”を印刷して、これは私にとても困惑させて、大量のブログと公式のドキュメントを调べてから、私はやっとすべてJQuery ajaxの同期と非同期の提出の原因であることを理解しました.まず、JQuery ajaxの方法について説明します.
非同期の理解:コードがajax部分に実行されるとajaxの後の外部コードとともに実行され、ajaxの戻り値に使用する外部コードがあり、ajaxのasync属性がtrue(すなわちajaxが非同期)である場合、後続の外部コードはajaxの戻り値を得ることができず、同期すなわちajaxのasync属性がtrueに設定されている場合にのみ、ajaxセクションを実行した後、後続のコードを実行すると、関係に連続性が発生し、その戻り値が得られます.
それからasyncをfalseに設定して、問題は本当に解決しましたが、alert文を追加して非同期でも名前と文字列を印刷できる理由が分かりませんか?引き続き資料を調べて、私自身の総括は以下の通りです(大牛の指摘を歓迎します):
1、async:trueの場合:コミットボタンをクリックすると、クリックイベントのコード文が実行され、ajaxに実行されると、非同期実行であるため、後の文の実行がブロックされることはありません.後に文がないので、ajaxがクリックイベントを実行して終了しないため、名前や文字列が印刷されない可能性があります.ajaxの後にalert文を追加すると、クリックイベントがブロックされ、ajaxが実行するのに十分な時間があるため、コンソールは名前と文字列を印刷することができます.私は外層のクリックイベントを除去してajaxを直接実行しようとしたが、同期しても非同期でも名前と文字列を印刷することができ、私の推測を証明することができる.2、async:falseの場合:コミットボタンをクリックすると、クリックイベントのコード文も実行され、ajaxに実行されると、同期実行なのでajaxが正常に戻ってから後のコードを実行し続けなければならず、自然と名前と文字列が印刷されます.
もちろんこれらは私個人のいくつかの推測にすぎません.今、私はもっと多くの資料を調べて、私の推測を改善することを証明しています.大牛たちが私の間違いを指摘してくれることを望んでいます.私はきっと謙虚に受け入れます.
最近、本当の原因はajax自体が非同期であることが発見され、ajaxリクエストを開始すると、現在のjsは実行され続け、ajaxを通じてコミットを阻止したい場合は、sumitイベントでajaxを開始することはできません.例えば、
(type=「submit」を使用しないでください.その黙認はフォームをコミットしますが、buttonではデフォルトではフォームをコミットしません).または、ボタンのデフォルトイベントをブロックし、イベントが終了する前にreturn falseを追加します.転載先:https://www.cnblogs.com/sunmaer/p/6079623.html