首页 > 解决方案 > 使用 SweetAlert 库显示错误消息

问题描述

正在开发一个应用程序,在该应用程序中验证后端(使用 PHP)并在前端显示错误,正在使用 AJAX 传递错误。除了我需要使用sweet alert js library以有序列表格式显示错误之外,一切都运行良好。

错误正在显示,但问题是它们没有以有序列表的方式对齐:

甜蜜警报Js链接

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

阿贾克斯代码

 $.ajax({
            type: "POST",
            url: "getplans",
            data:JSON.stringify(type),
            contentType: 'application/json',
            dataType: "json",
            success: function(response){
                //Redirect
                window.location.href="getp" ;
            },
            //Alert errors from backend
            error: function(data) {
                //Unblock the spinner
                $.unblockUI();
                var errors = '';
                for(datos in data.responseJSON){
                    errors += data.responseJSON[datos] + '\n';
                }
                //Sweet alert js function
                swal(errors, "warning");
            }
        });

标签: javascriptsweetalert

解决方案


您可以ul像这样获取元素内部的节点:

swal("Error:", document.getElementsByTagName('ul')[0].innerText)

并将它们写为文本。下面是一个简单的例子:

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>
<body>
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
    <script type="text/javascript">
        //swal("Error:", document.getElementsByTagName('ul')[0].innerText)

    let array = ['cofee', 'Tea', 'mill'];
    let list = '';
    for (var i = 0; i < array.length; i++)
        list += array[i] + '\n';

    swal("Error", list);
    </script>

</body>
</html>

推荐阅读