將數據從按鈕onclick傳遞到ajax代碼

Question

我在Ajax中遇到問題。

我的JS文件：

$(document).ready(function() {
  $(document).ajaxStart(function() {
    $("#wait").css("display", "block");
  });
  $(document).ajaxComplete(function() {
    $("#wait").css("display", "none");
  });
  $("button").click(function() {
    $.post("ajax", {
        name: "Donald Duck",
        _token: "{!! csrf_token() !!}",
        city: "Duckburg"
      },
      function(data, status) {
        alert("Data: " + data + "\nStatus: " + status);
      });
  });
});

我的html代碼：

<div id="wait" style="display:none;width:69px;height:89px;border:1px solid black;position:absolute;top:50%;left:50%;padding:2px;">
  <img src='demo_wait.gif' width="64" height="64" />
  <br>Loading..</div>

<button>Start</button>

而且效果很好，我需要將按鈕代碼中的值傳遞給Javascript，然后將其用於Post URL。

我將js文件更改為：

function MyJS(str) {
  $(document).ready(function() {
    $(document).ajaxStart(function() {
      $("#wait").css("display", "block");
    });
    $(document).ajaxComplete(function() {
      $("#wait").css("display", "none");
    });
    $("button").click(function() {
      $.post("ajax" + str, {
          name: "Donald Duck",
          _token: "{!! csrf_token() !!}",
          city: "Duckburg"
        },
        function(data, status) {
          alert("Data: " + data + "\nStatus: " + status);
        });
    });
  });
}

而我的新html代碼是：

  <div id="wait" style="display:none;width:69px;height:89px;border:1px solid black;position:absolute;top:50%;left:50%;padding:2px;"><img src='demo_wait.gif' width="64" height="64" /><br>Loading..</div>
<button onclick="MyJS('9');">Start</button>

更改后，該代碼似乎停止工作。

Answer 1

您可以使用以data-*為前綴的自定義屬性來存儲任意信息以及稍后可以使用的元素。

<button data-key="9">Start</button>

然后，使用現有的單擊處理程序，可以使用Element.dataset屬性訪問數據。 使用jQuery，可以使用.data('key')方法獲得相同的結果。

$("button").click(function() {
    var str = this.dataset.key; //$(this).data('key')
}); 

注意：擺脫內聯單擊處理程序。

Answer 2

• 不要將document.ready和ajaxStart代碼放在函數中
• 添加type="button"以便不在多個瀏覽器中將頁面提交給自己
• 使用data屬性或值將字符串傳遞給服務器：

像這樣

$(document).ready(function() {
  $(document).ajaxStart(function() {
    $("#wait").css("display", "block");
  });
  $(document).ajaxComplete(function() {
    $("#wait").css("display", "none");
  });
  $("button").click(function() {
    $.post("ajax", {
        id:$(this).data("id"),
        name: "Donald Duck",
        _token: "{!! csrf_token() !!}",
        city: "Duckburg"
      },
      function(data, status) {
        alert("Data: " + data + "\nStatus: " + status);
      });
  });
});

使用

<button type="button" data-id="9">Start</button>

或使用

$(this).val();

與

<button type="button" value="9">Start</button>