没事都是无法理解Form的原理,不喜欢自动提交数据。但是又喜欢html5 原生对于input(特殊类型)的判断,
所以需要可以找到点击button (type=submit)时,可以做到:
HTML 代码部分:
使用了Bootstrap 4.2 <form id="login_form"> <div class="form-group row"> <label for="login_email" class="col-sm-4 col-form-label">*Email</label> <div class="col-sm-8"> <input type="email" class="form-control" id="login_email" aria-describedby="emailHelp" placeholder="username@aaa.com"> </div> </div> <div class="form-group row"> <label for="login_password" class="col-sm-4 col-form-label">*Password</label> <div class="col-sm-8"> <input type="password" class="form-control" id="login_password" placeholder="Password"> </div> </div> <!--Error Msg Part--> <div id="login_error_msg" class="alert alert-danger" role="alert"></div> <div class="row"> <div class="col-sm-4 offset-sm-9"> <button type="submit" class="btn btn-primary"> <i class="fas fa-sign-in-alt"></i> 登陆 </button> </div> </div> </form>
JS 代码部分:
$("#login_form").on(‘submit‘, function (ev) { // html5 原生 validation ev.preventDefault(); // POST data,自己Ajax var data = { ‘email‘: $("#login_email").val().trim(), ‘password‘: $("#login_password").val().trim(), }; //$("#login_main").mask("认证中..."); $.ajax({ type: "POST", url: "/login/", data: data, dataType: ‘json‘, success: function (result) { // do something }, complete: function () { // $("#login_main").unmask("认证中..."); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest.status + " >>> " + textStatus + "\n" + XMLHttpRequest.responseText); }, }); })
完美的解决了我的需求~~JS部分还是不是很熟,也是从别人那里找到的代码。。有时间搞懂为啥这么写~~~
[JS] Form表单提交时:即使用原生html5验证,又使用ajax提交数据
原文:https://www.cnblogs.com/shuo-yang0459/p/10577496.html