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模式窗口中显示详细信息。

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，将事件处理程序绑定到这些按钮，记下正在使用的这些属性（您可以添加您想要的数量）：

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

Answer 2

您可以将值传递给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 3

您需要使用ajax。

首先，改变渲染按钮的方式，如下所示：

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

然后使用类.detailsLink处理按钮上的click事件，以便在响应呈现这样的html sweetalert时调用对后端的ajax请求：

// 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 4

您可以将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){}`

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

4 个答案: