jQuery form 表單提交插件 · PHP/Python/前端/Linux 等等學習筆記

[TOC] > [github鏈接](https://github.com/jquery-form/form) > [demo](https://jquery-form.github.io/form/) ## 引入 ``` <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js" integrity="sha384-qlmct0AOBiA2VPZkMY3+2WqkHtIQ9lSdAsAn5RUJD/3vA5MKDgSGcdmIv4ycVxyn" crossorigin="anonymous"></script> ``` ## demo ``` <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js" integrity="sha384-FzT3vTVGXqf7wRfy8k4BiyzvbNfeYjK+frTVqZeNDFl8woCbF0CYG6g2fMEFFo/i" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <form id="myForm" action="comment.php" method="post"> Name: <input type="text" name="name"> Comment: <textarea name="comment"></textarea> <input type="submit" value="Submit Comment"> </form> <script> $(function() { var options = { target: '#divToUpdate', url: 'comment.php', beforeSubmit:function(formData, jqForm, option){ $("xxx").validate() //驗證 }, success: function() { alert('Thanks for your comment!'); } }; $('#myForm').ajaxForm(options); }); </script> </head> ``` ## 實例 ### 上傳文件進度條 > [參考demo末尾](https://jquery-form.github.io/form/examples/) ``` var bar = $('.bar'); var percent = $('.percent'); var status = $('#status'); $('form').ajaxForm({ beforeSend: function() { status.empty(); var percentVal = '0%'; bar.width(percentVal) percent.html(percentVal); }, uploadProgress: function(event, position, total, percentComplete) { var percentVal = percentComplete + '%'; bar.width(percentVal) percent.html(percentVal); //console.log(percentVal, position, total); }, success: function() { var percentVal = '100%'; bar.width(percentVal) percent.html(percentVal); }, complete: function(xhr) { status.html(xhr.responseText); } }); ```