javascript - Sweet Alert和基于php while循环上的id的ajax调用

Question

我有一个带有 php while 循环的 php 页面，在其中我获取用户详细信息和 id。该循环创建按钮，单击这些按钮时，我需要根据其 ID 了解每个按钮的详细信息，如下图所示。

http://tinypic.com/r/znl8w9/9

<td><button class='btn btn-success' value="<?php echo $id ;?>" onclick="javascript:getDetails();">View Details</button></td>

我需要在 javascript sweetalert 模式窗口中显示详细信息。

function getDetails() {
  swal({
    title: "User Details",
    text: User Details here!",
    confirmButtonColor: "#00B4B4",
    imageUrl: "<?php echo $image; ?>"
  });
};

如何通过单击循环生成的按钮来获取 sweetalert 模式中每个用户 ID 的详细信息。我们可以通过按钮获取每个用户的 ID 并将其传递给 sweetalert，然后对不同的页面执行 ajax 请求，并根据 ID 从数据库中提取详细信息并显示它。

或者还有其他方法吗？

请问可以吗？如果是的话怎么办？？我是一个新手，如果我忽略了一些事情，我很抱歉。

Answer 1

第 1 步，为按钮添加一个类，例如 user-details 并删除属性 onclick。还可以添加 data-* 属性和您的详细信息，例如:

<button class='btn btn-success user-details' data-name="John Doe 1" data-image="https://png.icons8.com/contacts/ios7/50/e67e22">View Details</button>

第 2 步，将事件处理程序绑定(bind)到这些按钮，注意所使用的这些属性(您可以添加所需的数量):

$('.user-details').click(function(e) {
    e.preventDefault();

    var name = $(this).attr('data-name');
    var image = $(this).attr('data-image');

    swal({
        title: "User Details",
        text: "User Details: " + name,
        confirmButtonColor: "#00B4B4",
        imageUrl: image,
    });
});

这几乎是您所需要的，您可以尝试 demo here .