Как отправить форму с ajax после подтверждения формы?

Question

Я пытаюсь опубликовать свою форму с ajax. Но когда я использую щелчок вместо отправки в jquery, это работает, но эта форма не проверяется. когда я использую это, это 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 к событию 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, и формы HTML, вы можете упростить ее до data: $(this).serialize().