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>

将按钮onclick中的数据传递给ajax代码

2 个答案: