个人中心
gpt4 book ai didi

javascript - 使用 ajax 的甜蜜警报 - 无法弄清楚发布后的返回消息

转载 作者：行者123 更新时间：2023-11-28 05:57:40 28 4
gpt4 key购买 nike


我想使用 sweet Alert JS 在 ajax 表单提交上显示警报。通过做一些研究，我已经弄清楚如何使用ajax发布，但无法使其正常运行并使用sweetalert来显示警报。

index.html:

<!DOCTYPE html>
<html>

<head>
  <link data-require="sweet-alert@*" data-semver="0.4.2" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/0.4.2/sweet-alert.min.css" />
  <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script data-require="sweet-alert@*" data-semver="0.4.2" src="//cdnjs.cloudflare.com/ajax/libs/sweetalert/0.4.2/sweet-alert.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <form class="form-horizontal" name="addSaleForm" id="addSaleForm" method="POST">
    <label>First Name:</label><br>
    <input type="text" name="fname" id="fname"><br>
    <button type="submit" id="submit-btn" name="register">Submit</button>
  </form>

  <!-- Display result/error msg from php file -->
  <div id="status"></div>

</body>

</html>


<script>
  $(document).ready(function(e) {
    $("#addSaleForm").on('submit', (function(e) {
      e.preventDefault();

      swal({
          title: "Are you sure?",
          text: "Do you want to submit it?",
          type: "warning",
          showCancelButton: true,
          confirmButtonColor: '#DD6B55',
          confirmButtonText: 'Yes!',
          cancelButtonText: "No!",
          closeOnConfirm: false,
          closeOnCancel: false
        },
        function(isConfirm) {
          if (isConfirm) {
            swal(
            function() {
              $.ajax({
                url: "process.php",
                type: "POST",
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                success: function(data) {
                  if (data === 'Success') {
                    swal("Processed!!!", "Your form is processed successfully", "success");
                  }
                  else {
                    document.getElementById("status").className += " alert-danger";
                    $("#status").html(data);
                    swal("Error!!!", data, "error");
                  }
                },
                error: function() {}
              });
            });
          } else {
            swal("Cancelled", "Your form is cancelled.", "error");
          }
        });



    }));
  });
</script>

process.php

<?php
if (isset($_POST['fname'])) {
  echo "Success";
}
else{
  echo "Please enter your first name.";
}
?>

这是上述代码的实时版本。
http://plnkr.co/edit/maZs1NjFlxzqoFpGLgoe?p=preview

最佳答案

也许您必须在 php 条件下处理后解析您的响应。只需使用 JSON 在 ajax 中返回答案，解析它，然后使用 sweet Alert 来显示消息。请看这个例子:

<html>
<head>
    <title>Code</title>
</head>
<body>

    <form>
        <input type="text" id="name" placeholder="Your name">
        <input type="button" id="confirm" value="Confirm">
    </form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript"> 
    $('#confirm').click(function() {        
        var name = $('#name').val().trim();
        //We count how many letters have the NAME. If you write MARIO, you will have the number 5, because MARIO have 5 letters
        var name_length = name.length;
        var mydata = 'action=check_name&name='+name+'&length='+name_length;
        $.ajax({
            method:'POST',
            url:'myfile.php',
            data:mydata,
                success:function(response) {
                    var answer = JSON.parse(response);
                    switch ( answer.status_response ) {
                        case 'success' :
                            swal("Good job!", ""+answer.message_response+"", "success")                     
                            break;
                        case 'error' :
                            swal("Stop!", ""+answer.message_response+"", "error")   
                            break;
                    }
                }
        });
    });
</script>
<!--Please load all your sweet alerts files, i will recommed you this version: http://t4t5.github.io/sweetalert/-->
</body>
</html>

<?php 
    //myfile.php
    $action = $_POST['action'];
    switch ( $action ) {
        case 'check_name':
            $name = addslashes(trim($_POST['name']));
            /* Also in PHP you can to delete spaces in the name you recieve for determinate if you not are recieving only spaces in the name
            * $name_length = $_POST['name_length'];
            */

            //strlen is for count all letters in your string for $name
            $count_name_length = strlen($name);
            //If name have more than 0 letters, you successfully recive real namne
            if ( $count_name_length > 0 ) {
                $response = array(
                                 'status_response'  => 'success',
                                 'message_response' => 'Thank you for write your name, '.$name);
                echo json_encode($response);
            }
            //Otherwise, the user does not provide a name
            else {
                $response = array(
                                 'status_response'  => 'error',
                                 'message_response' => 'Hey, you have to put one name!');
                echo json_encode($response);                
            }
            break;
    }
?>

关于javascript - 使用 ajax 的甜蜜警报 - 无法弄清楚发布后的返回消息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37516469/

28 4 0
文章推荐： jquery - 如何将固定的大型菜单转换为流动的大型菜单
文章推荐： ios - 我应该在 iOS 应用程序中的什么位置存储默认字符串列表？
文章推荐： javascript - AngularJS 按钮指令不起作用
文章推荐： javascript - PHP 中的模式与 php include
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com