Sweet Alert 和 ajax 调用基于 php while 循环中的 id

Question

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

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

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

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

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

或者还有其他方法吗？？

请问可以吗？如果是这样怎么办？？我是新手，如有遗漏请见谅。

Answer 1

您可以将值传递给 getDetails 函数。类似于：

function getDetails(imageUrl, details1, details2) {
  swal({
    title: detail1,
    text: details2,
    confirmButtonColor: "#00B4B4",
    imageUrl: imageUrl
  });
};

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

Answer 2

您需要使用 ajax。

首先，像这样稍微改变按钮的渲染方式：

<td>
    <button class='btn btn-success detailsLink' data-userId="<?php echo $id ?>">
        View Details
    </button>
</td>

然后使用 class .detailsLink 处理按钮上的点击事件，以调用对后端的 ajax 请求，一旦你有响应呈现 html喜欢这样的甜心：

// When document is ready
$(document).ready(function()
{
    // Handle button click event
    $('button.detailsLink').click(function()
    {
        // Get user id from button
        var userId = $(this).data('userId');

        // Ajax request user details
        $.get('/user-details.php?userId=' + userId)
            .done(function(userData)
            {
                // Build html alert content
                var userInfo = '<p>User Name: '+ userData.userName +'</p>';
                userInfo += '<p>Age: '+ userData.age +'</p>';

                // Display html sweet alert
                swal({
                    title: 'Success',
                    html: userInfo,
                    type: 'info'
                });
            })
            .fail(function()
            {
                // Simple error handler
                swal('Oops...', 'Failed to load user info.', 'error');
            });
    });
});

提供用户数据的后端脚本可以是这样的：

<?php

// Parse user id
$userId = isset($_GET['userId']) ? $_GET['userId'] : 0;

// Run your sql query here to load user info
// I'm preparing dummy data here
$userData = array(
    'userName' => 'Bob',
    'age' => 39
);

// Send json response back
header("Content-Type: application/json");
echo json_encode($userData);
exit;

或者；您的后端脚本可以生成 HTML 并发送它，而您的 javascript 可以简单地将其设置为甜蜜警报。

因此，您的后端脚本将如下所示：

<?php

// Parse user id
$userId = isset($_GET['userId']) ? $_GET['userId'] : 0;

// Run your sql query here to load user info
// I'm preparing dummy data here
$userData = array(
    'userName' => 'Bob',
    'age' => 39
);

// Render html response

?>

<p>User Name: <?php echo $userData['userName'] ?></p>
<p>Age: <?php echo $userData['age'] ?></p>

您的 ajax 调用将如下所示：

// Ajax request user details
$.get('/user-details.php?userId=' + userId)
    .done(function(userDataHtml)
    {
        // Display html sweet alert
        swal({
            title: 'Success',
            html: userDataHtml,
            type: 'info'
        });
    })
    .fail(function()
    {
        // Simple error handler
        swal('Oops...', 'Failed to load user info.', 'error');
    });

Answer 3

您可以将 user details 作为 function parameter

`onclick="javascript:getDetails('<?php echo $title; ?>');"`

并在脚本中获取它

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

点赞获取所有 title、text、imageurl 点赞

`function(title,text,imageUrl){}`

Answer 4

第1步，给按钮添加一个class，例如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 步，将事件处理程序绑定到这些按钮，注意正在使用的这些属性（您可以添加您想要的数量）：

$('.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。

Sweet Alert 和 ajax 调用基于 php while 循环中的 id

Sweet Alert and ajax calls based on id on php while loop

javascript

php

jquery

sweetalert