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

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

javascript php jquery

Javascript php while循环中基于id的Sweet Alert和ajax调用,javascript,php,jquery,sweetalert,Javascript,Php,Jquery,Sweetalert,我有一个php页面，其中有一个php while循环，我在其中获取用户详细信息和id。该循环创建了一些按钮，单击这些按钮时，我需要根据每个按钮的id了解它们的详细信息，如下图所示您可以将该值传递给getDetails函数。比如：函数getDetails（imageUrl、details1、details2）{ 游泳({ 标题：详情1，正文：详情2， confirmButtonColor:#00B4“， imageUrl:imageUrl }); }; 您可以将该值传递给getDeta

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

您可以将该值传递给getDetails
函数。比如：
函数getDetails（imageUrl、details1、details2）{
游泳({
标题：详情1，
正文：详情2，
confirmButtonColor:#00B4“，
imageUrl:imageUrl
});
};


您可以将该值传递给getDetails
函数。比如：
函数getDetails（imageUrl、details1、details2）{
游泳({
标题：详情1，
正文：详情2，
confirmButtonColor:#00B4“，
imageUrl:imageUrl
});
};


您需要使用ajax
首先，稍微更改渲染按钮的方式，如下所示：
<td>
    <button class='btn btn-success detailsLink' data-userId="<?php echo $id ?>">
        View Details
    </button>
</td>

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

<?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 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');
    });

提供用户数据的后端脚本可以是这样的：
<td>
    <button class='btn btn-success detailsLink' data-userId="<?php echo $id ?>">
        View Details
    </button>
</td>

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

<?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 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');
    });

您需要使用ajax
首先，稍微更改渲染按钮的方式，如下所示：
<td>
    <button class='btn btn-success detailsLink' data-userId="<?php echo $id ?>">
        View Details
    </button>
</td>

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

<?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 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');
    });

提供用户数据的后端脚本可以是这样的：
<td>
    <button class='btn btn-success detailsLink' data-userId="<?php echo $id ?>">
        View Details
    </button>
</td>

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

<?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 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');
    });

您可以将用户详细信息
作为功能参数

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

您可以将用户详细信息
作为功能参数

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

步骤1，向按钮添加一个类，例如用户详细信息
和删除属性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>

这是您所需要的全部，您可以尝试。
步骤1，向按钮添加一个类，例如用户详细信息
和删除属性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>

这是您所需要的全部内容，您可以尝试。
不建议在HTML中多次使用iddetailsLink
。@debute Oh！很抱歉忘了这是一个循环。换了。这个问题有什么解决办法吗？当然有，如果你使用jQuery，我可以发布一个快速的答案。@debute是的，我确实在页面中使用jQuery。很高兴知道有一个解决方案存在：）不建议在HTML中多次使用iddetailsLink
。@初次亮相哦！很抱歉忘了这是一个循环。换了。这个问题有什么解决办法吗？当然有，如果你使用jQuery，我可以发布一个快速的答案。@debute是的，我确实在页面中使用jQuery。很高兴知道有一个解决方案存在：）对不起，它不起作用。我需要在其他变量中的其他细节，而不是图像。无法理解imageUrl？？？@Pamela看到我的答案了。谢谢。好的，我把图像处理好了。我还需要其他细节。让我也来试试ajax解决方案Latheesan@Pamela您真的不需要ajax。这将导致用户单击和工具提示显示之间的延迟。。可以将多个参数移动到函数中。我更新了我的答案。对不起，它不起作用。我需要在其他变量中的其他细节，而不是图像。无法理解imageUrl？？？@Pamela看到我的答案了。谢谢。好的，我把图像处理好了。我还需要其他细节。让我也来试试ajax解决方案Latheesan@Pamela您真的不需要ajax。这将导致用户单击和工具提示显示之间的延迟。。可以将多个参数移动到函数中。我更新了我的答案…谢谢。让我试试。对于ajax请求，开发人员控制台中的userId未定义。好像有点不对劲，谢谢。让我试试。对于ajax请求，开发人员控制台中的userId未定义。好像有点不对劲，谢谢。好的，我把图像处理好了。我还需要其他细节。让我也尝试一下Latheesan的ajax解决方案。ajaxajax
应该会增加您的页面负载。谢谢。好的，我把图像处理好了。我还需要其他细节。让我也尝试一下Latheesan的ajax解决方案ajax
应该会增加页面负载获取自定义数据属性的更好方法如下：var name=$（this.data（'name'）
我更喜欢使用attr
，所以很明显我使用attribute，因为当您使用$（this）设置数据时，data（'name'，'foo'）
然后它将保存到节点对象而不是DOM，因此$（this.attr（'data-name'）将输出不正确的旧数据。但在这种情况下，这并不重要。@debute非常感谢你。没有使用ajax，这是一个很棒的解决方案。。从中学到了很多。再次感谢您的大力支持。获取自定义数据属性的更好方法如下：var name=$（this.data（'name'）
我更喜欢使用attr
，所以很明显我使用attribute，因为当您使用$（this）设置数据时，data（'name'，'foo'）
然后它将保存到节点对象而不是DOM，因此$（this.attr（'data-name'）将输出不正确的旧数据。但在这种情况下，这并不重要。@debute非常感谢你。没有使用ajax，这是一个很棒的解决方案。。从中学到了很多。再次感谢您的大力支持。