如何正确使用 sweetalert / swal？答案

【问题标题】：How to use sweetalert / swal correctly?如何正确使用 sweetalert / swal？
【发布时间】：2022-08-14 15:38:13
【问题描述】：

我是 Javascript / jQuery 的新手。我想使用 \'sweetalert\' 库显示一些警报消息，并根据用户响应，该函数将返回或继续。

这是我的实现：

  jQuery(\"#some_exchnage_request_form\").on( \'submit\', function(e){
        
        // some implementation
        // Now showing the alert
        
        jQuery.getScript(\'https://unpkg.com/sweetalert/dist/sweetalert.min.js\', function() {
            
         swal({
                title: \"Do you want Continue ? \",
                text: \"You need to pay extra amount\",
                icon: \"success\",
                buttons: true,
                confirmButtonColor: \'#C64EB2\',
              })
              .then((willSubmit) => {
                if (!willSubmit) {
                   return false;
                }
              });
        }); 
       // rest of the code
    });

这里的期望是，如果用户选择“取消”按钮，该函数应该返回 false，否则在选择“确定”按钮时，“其余代码”部分将被执行。

但这里的问题是代码不会因为用户输入而停止，而是继续。将显示警报框，但它忽略用户选择。

我知道实施是错误的，但不确定执行此操作的正确方法是什么。

谢谢！！

标签： javascript jquery sweetalert

【解决方案1】：

你需要使用小号沃尔火（）；让它工作。

https://sweetalert2.github.io/

jQuery("#some_exchnage_request_form").on( 'submit', function(e){

    // some implementation
    // Now showing the alert
    
    e.preventDefault();
    
    jQuery.getScript('https://cdn.jsdelivr.net/npm/sweetalert2@11', function() {
    
    Swal.fire({
      title: 'Do you want Continue ?',
      text: "You need to pay extra amount",
      icon: 'success',
      showCancelButton: true,
      confirmButtonColor: '#C64EB2',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes'
    }).then((result) => {
      if (result.isConfirmed) {
        Swal.fire(
          'Confirmed!',
          'You agreed to pay extra amount.',
          'success'
        )
      } else {
        console.log('clicked cancel');
      }
    })
    
    })
    
   // rest of the code
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="some_exchnage_request_form">
  <input type="submit">
</form>

【讨论】：

我在“.js”文件中运行此代码。这就是我在“jQuery.getScript('unpkg.com/sweetalert/dist/sweetalert.min.js', function() {}”中使用'swal'代码的原因。我可以避免这种情况，而是使用 <script src= ... ></scrpt> 吗？如何?
@user2679476 我编辑了我的代码，它的工作原理是一样的
即使我使用“Swal.fire()”和“e.preventDefault()”，我也不认为它对我有用。问题是控制不会在这里停止：jQuery.getScript('cdn.jsdelivr.net/npm/sweetalert2@11', function() {}); Swal 窗口稍后出现，并在此之前执行“其余代码”。期望是控制应该在'swal - 确认窗口'等待，然后其余的代码将被执行。
如何在不使用 getScript() 的情况下在 .js 文件中使用 swal？ Query.getScript('cdn.jsdelivr.net/npm/sweetalert2@11', function() {});
我认为您需要将甜蜜脚本的代码放入您的js中。

【解决方案2】：

有类似的问题，看起来像 'sweetalert' 的限制，与 js 中的 alert()/confirm() 不同，执行不会因用户输入而停止。

sweetalert pause execution and return value

How to return the value of SweetAlert2 input?

【讨论】：