jQuery ajax的beforeSend妙用

2019-03-05 292 words 2 minutes

Contents

最近看到 jQuery 有beforeSend
看到這個可以做驗證上面
或著動態載入特效
先來筆記，感覺很容易忘記

1
2
3
4


<form method="post" action="test.php">
AA：<input type="text" name="aa" onkeypress="if (event.keyCode == 13) {return false;}">
<input type="radio" name="cc">CC
</form>

XYZ 的筆記本: HTML form 只有一個 text input 時，在 input 上按 enter 會自動送出表單
之前公司也是用這個解法
但是我覺得這個方法寫在 html 真的很長
有想到一個方法

1

$("input").on("keypress", e => e.preventDefault());

ajax 搭配 submit 事件，實做 ajax 後，下面回傳 false，所以表單不會送出去
beforeSend可以做驗證動作
這時候還會有 input 按 Enter 會送出的問題

EX:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


$('form').on('submit',function(){

  $.ajax({
    url: '.',
    data:{
      ...
    },
    beforeSend: function(){
      ...
    }
  })
  return false;
});

由於暫存筆記有記錄 jquery.form.js
但是一直沒有記錄，趁著這個時間趕快記錄

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


$("#myForm").ajaxForm(function() {
  $("#output1")
    .html("提交成功！欢迎下次再来！")
    .show();
});

$("#myForm2").submit(function() {
  $(this).ajaxSubmit(function() {
    $("#output2")
      .html("提交成功！欢迎下次再来！")
      .show();
  });
  return false; //阻止表单默认提交
});

淺談 jquery.form.js 的 ajaxSubmit 和 ajaxForm 的使用 | 程式前沿

簡單來說ajaxForm和ajaxSubmit看起來很像
但簡單來說ajaxForm是拿當下 form 做 submit 時候，不會送出去，會做 ajax
這就是跟一般 ajax 差別

ajaxSubmit是當下呼叫拿當下 form 做 ajax 動作
所以上面範例是寫在.submit()裡面

ajax 拿來放在 submit 可以簡單做到表單綁定效果

以下是筆記暫存就放在下面
怕沒有甚麼機會寫到

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


# JQuery Form Validate
[使用jQuery.form庫中ajaxSubmit提交表單時遇到的一些問題 - 掃文資訊](https://hk.saowen.com/a/e36ca7b7b772fcc2699400c165fb9129964364e45217a35412ca0cdb21b37b63)
https://jqueryvalidation.org/documentation/
http://formvalidation.io/examples/

[Bootstrap 表單驗證formValidation 之表單動態驗證 - CSDN博客](https://blog.csdn.net/u012123026/article/details/53288641)
[Bootstrap 表单验证formValidation 之表单动态添加元素之后再次验证 - CSDN博客](https://blog.csdn.net/weixin_40475396/article/details/79879094)


jQuery Form
[jQuery Form Plugin中AjaxForm与AjaxSubmit的区别-飘一代-51CTO博客](http://blog.51cto.com/fluagen/393134)
把傳統表單迅速套成ajaxForm，submit可以做成ajax動作

# waitme

# ajaxsuccess
[Ajax-Global Ajax Event Handlers .ajaxComplete()、.ajaxError()、.ajaxSend()、.ajaxStart()、.ajaxStop()、.ajaxSuccess() | 阿沙布魯 - 點部落](https://dotblogs.com.tw/brooke/2016/07/10/142933)

可搭配waitme實做

參考來源: