過去に質問をさせていただき、eturn falseすることによりイベントをsubmitイベントをキャンセルできることを学ぶことができました。
これを応用して、下記のコードの通り
- まず最初のthenでerrorがあればerrCode[]に格納される。
- 次のthenでerrCode[]のlengthが1以上であることを条件(エラーがある)、errStatusに"YES"を格納
- 次のthenでrrCode[]のlengthが0以下であることを条件(エラーがない)、errStatusに"NO"を格納
2)と3)を別のthenで処理する意味は本来なのですが、便宜上、ここでは分けています
4) 最後にajax外でerrStatusを判定することにより、return falseでキャンセルさせます
ここで、submitイベントがキャンセルされません
直前にerrStatusを出力しても、何も出力されません("").
前の質問でこのような方法で外で判定すべきとのアドバイスをいただいたのですが、実現の仕方がわからなくなってしまいました。
また、同期非同期の順番を読み解いていてthenとdoneで最後にすべて成功した場合
doneが処理されるとなっていたので、ajaxの外ではなく中のdoneとして以下のようなコードも試してみたのですが、
このばあerrStatusにはyes/noが正しく格納されたのですが、return falseが正しく実行されず、submitがキャンセルされませんでした。
.done(function(){
alert(errStatus);//適切にerrStatusにyes/noが格納されていることを確認した
if(errStatus=="yes"){
return false;
}else if(errStatus=="no"){
$("#form_a").submit();
}
})
やりたいこととしては、ajaxでエラーの判定を行い、エラーがあればerrStatusにyesを格納し、return falseでsubmitをキャンセル、エラーがなければそのままsubmitを実行されるなのですが、これらのコードの問題点及び解決法についてアドバイスを願えますでしょうか。
よろしくお願い申し上げます。
html
1<form id="form_a" action="" method="POST"> 2 <input type="text"> 3 <button form="form_a" type="submit">送信<button> 4</form>
javascript
1$(function(){ 2 3$("#form_a").on('submit',function(){ 4 const errCode = []; 5 var errStatus=""; 6 $.ajax({ 7 type:'POST', 8 url:'hoge.php', 9 datatype:'json', 10 data:{ 11 xxx:xxx, 12 yyy:yyy 13 } 14 }) 15 .then( 16 function(data){ 17 errCode.push("a") 18 } 19 ,function(){ 20 alert('通信に失敗しました、通信環境を確認してください'); 21 }).then(function(){ 22 if (errCode.length>0) { 23 errStatus ="yes"; 24 } 25 },function(){ 26 alert('通信に失敗しました、通信環境を確認してください'); 27 }).then(function(){ 28 if (errCode.length<1) { 29 errStatus="no"; 30 },function(){ 31 alert('通信に失敗しました、通信環境を確認してください'); 32 }) 33 //alert(errStatus);//試しに出力 34 if(errStatus=="yes"){ 35 return false; 36 } 37 }) 38}) 39
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/17 03:57
2019/06/17 05:39
2019/06/17 13:02