javascript - JSON 将数据从 HTML 发送到 PHP 并提醒用户该过程是否成功

Question

案例
我创建一个新的注册表单并将其保存到数据库中。保存过程成功，但我想添加一些用户交互，例如当数据成功保存时，系统通过 toastr 通知用户。我已经创建了代码，但它不起作用。请帮忙。下面是代码。

Javascript 和 HTML

//toast a message upon successful registration
$(document).on('click', '.submit_button', function(e) {
  console.log("submit button clicked");
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: $("#regtenantform").attr('action'),
        data: $("#regtenantform").serialize(),
        success: function(response) {
             if (response === "Success") {
              $.toast({
            heading: 'Welcome to my Elite admin',
            text: 'Use the predefined ones, or specify a custom position object.',
            position: 'top-right',
            loaderBg:'#ff6849',
            icon: 'success',
            hideAfter: 3500, 
            stack: 6
          });
                  window.reload;
             } else {
                   alert("invalid username/password.  Please try again");
             }
        }
    });
});

<form id="regtenantform" name="regtenantform" class="form-material form-horizontal" method="post" action="../controllers/tenantcontroller.php" onsubmit="return ray.ajax()">
      <div class="form-group">
        <label class="col-md-12">Fullname <span class="help"> e.g. "Azizul"</span></label>
        <div class="col-md-12">
          <input type="text" class="form-control form-control-line" placeholder="Fullname" id="name" name="name" required="">
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-12" for="example-email">Identification Number <span class="help"> e.g. "860102075555" (without "-" or space)</span></label>
        <div class="col-md-12">
          <input type="text" class="form-control form-control-line" placeholder="Id Number" id="ic" name="ic" required="">
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-12">Phone Number <span class="help"> e.g. "0123456789"</span></label>
        <div class="col-md-12">
          <input type="text" class="form-control form-control-line" placeholder="No." id="contact" name="contact" required="">
        </div>
      </div>
          
      <div class="form-group m-b-0">
          <div class="col-sm-offset-3 col-sm-9 text-right">
            <button type="button" class="btn btn-inverse waves-effect waves-light m-r-10" id="reset" name="reset">Reset</button>
            <button type="submit" class="btn btn-info waves-effect waves-light" id="submit_button" name="submit_button">Save</button>
          </div>
      </div>

    </form>

Answer 1

这里:

$(document).on('click', '.submit_button', function(e) {
                         ^---CSS class


<button type="submit" class="btn btn-info waves-effect waves-light" id="submit_button" name="submit_button">Save</button>
                             ^^----nowhere do you have a "submit_button" class

您的ID为 submit_button ，所以您的点击处理程序应该寻找 #submit_button ，不是.submit_button