jquery - 表单验证后如何使用ajax发布表单？

Question

我尝试使用ajax发布我的表单。但是当我在jquery部分使用click而不是submit时，它可以工作，但这次表单没有验证。当我使用提交时，这个ajax在验证后不会触发。出了什么问题？

<input type="text" class="form-control" id="Name" name="Name" aria-describedby="Name" required />
</div>
<div class="form-group">
  <label for="Surname" class="h6">Surname</label>
  <input type="text" class="form-control " id="Surname" name="Surname" aria-describedby="Surname" required />
</div>

<button id="btnAddUser" name="btnAddUser" type="submit" class="btn btn-primary float-right">Add User</button>

$(document).ready(function() {
  $('#btnAddUser').submit(function() {
    var user = {};
    user.Name = $('#Name').val();
    user.Surname = $('#Surname').val();
    user.ActiveDirectory = $('#ActiveDirectory').val();
    user.Role = $('#Role').val();
    user.Status = $('#Status').val();

    $.ajax({
      url: '/Processes.asmx/addUser',
      method: 'post',
      data: '{usr: ' + JSON.stringify(user) + '}',
      contentType: "application/json; charset=utf-8",
      success: function() {

        alert('Success');
      },
      error: function(err) {
        alert(err);
      }
    });
    return false;
  });
});

Answer 1

问题是因为 button 元素不会引发 submit 事件。要解决您的问题，您需要将控件包装在 form 元素中，然后将 JS Hook 到该元素的 submit 事件，如下所示:

<form action="/yourpage" method="POST">
  <input type="text" class="form-control" id="Name" name="Name" aria-describedby="Name" required />

  <div class="form-group">
    <label for="Surname" class="h6">Surname</label>
    <input type="text" class="form-control " id="Surname" name="Surname" aria-describedby="Surname" required />
  </div>

  <button id="btnAddUser" name="btnAddUser" type="submit" class="btn btn-primary float-right">Add User</button>
</form>

jQuery($ => {
  $('form').on('submit', function(e) {
    e.preventDefault();
    var user = {
      Name: $('#Name').val(),
      Surname: $('#Surname').val();
      ActiveDirectory: $('#ActiveDirectory').val();
      Role: $('#Role').val();
      Status: $('#Status').val();
    };

    $.ajax({
      url: '/Processes.asmx/addUser',
      method: 'post',
      data: '{usr: ' + JSON.stringify(user) + '}',
      contentType: "application/json; charset=utf-8",
      success: function() {
        console.log('Success');
      },
      error: function(err) {
        console.log(err);
      }
    });
  });
});

我还建议您检查一下如何创建在 AJAX 请求中发送的数据。手动编码 JSON 以及在 JSON 中嵌套 JSON 都是一种代码味道。

根据您在 WebMethod 中使用的模型绑定(bind)和表单 HTML，您可以将其简化为 data: $(this).serialize()。