Question

我想使用甜蜜警报JS在ajax表单提交上显示警报。通过一些研究，我已经找到了如何使用ajax进行发布，但无法通过甜蜜警报使其正常运行以显示警报。

的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

Answer 1

也许你必须在你的php条件下工作后解析你的回复。只需使用JSON返回ajax中的anwer，解析它然后使用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;
    }
?>

带有ajax的甜蜜警报 - 无法在发布后找出返回消息

1 个答案: