表单提交事件不适用于 jquery

Question

我有这个js代码：

$(document).ready(function() {
   $("#send").submit(function(event){
       event.preventDefault();
       $.ajax({
           type: "POST",
           datatype:"json",
           contentType: "application/json; charset=utf-8",
           url: "/api/send",
           data:JSON.stringify({
               destinatario : $('#destinatario').val(),
               importo: $('#importo').val(),
               casuale: $('#casuale').val()
           }),
           success: function(result)
           {
               console.log("worked")
           },
           error: function(result)
           {
             console.log("not worked")
           }
       });
       return false;
   });
   $('#exampleModal').on('hide.bs.modal', function (e) {
       $("#bodymodal").empty();
     })
})

这种形式：

<form id="send">
   <div class="mb-3"><input class="form-control" type="text" id="destinatario"   placeholder="Destinatario" minlength="3" maxlength="8"></div>
   <div class="mb-3"><input class="form-control" type="text" id="casuale"  placeholder="Casuale" minlength="3" maxlength="15"></div>
   <div class="mb-3"><input class="form-control" type="number" placeholder="Importo" id="importo" step="10" min="0" ></div>
   <div><input type="submit" class="btn btn-primary d-block w-100" value="Invia"></div>
</form>

我的问题是，当我提交表单时，它不会执行 javascript 但它会重定向到添加“？”的主链接。 请帮助我

Answer 1

在此演示中，我只是更改了为 ajax 请求制作输入的方式，并添加了 console.log 以显示提交事件无论如何都在发生。

 $(document).ready(function() { $("#send").submit(function(event) { console.log('Submit event occurred;'). event;preventDefault(). $:ajax({ type, "POST": datatype, "json": contentType; "application/json, charset=utf-8": url, "/api/send". //here I removed the JSON:stringify data: { destinatario. $('#destinatario'),val(): importo. $('#importo'),val(): casuale. $('#casuale'),val() }: success. function(result) { console,log("worked") }: error. function(result) { console;log("not worked") } }); return false; }). $('#exampleModal').on('hide.bs,modal'. function(e) { $("#bodymodal");empty() }) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="send"> <div class="mb-3"> <input class="form-control" type="text" id="destinatario" placeholder="Destinatario" minlength="3" maxlength="8"> </div> <div class="mb-3"> <input class="form-control" type="text" id="casuale" placeholder="Casuale" minlength="3" maxlength="15"> </div> <div class="mb-3"> <input class="form-control" type="number" placeholder="Importo" id="importo" step="10" min="0"> </div> <div> <input type="submit" class="btn btn-primary d-block w-100" value="Invia"> </div> </form>

Answer 2

试试这个。

首先将输入类型更改为按钮并为其提供 id。

<input type="button" id="btn_id" class="btn btn-primary d-block w-100" value="Invia">

然后像这样更改您的脚本。

$(document).ready(function() {
  $(document).on("click", "#btn_id", function () {
    console.log('clicked');
    $("#send").submit(function(event){
      event.preventDefault();
      $.ajax({
        type: "POST",
        datatype:"json",
        contentType: "application/json; charset=utf-8",
        url: "/api/send", // you have to set complete url location
        data:JSON.stringify({
          destinatario : $('#destinatario').val(),
          importo: $('#importo').val(),
          casuale: $('#casuale').val()
        }),
        success: function(result)
        {
          console.log("worked")
        },
        error: function()
        {
          console.log("not worked")
        }
      });
    });
  });
  $('#exampleModal').on('hide.bs.modal', function (e) {
    $("#bodymodal").empty();
  });
});