ajax的甜蜜警報 - 無法找出帖子後的回覆消息

我想使用甜蜜警報JS顯示在Ajax表單提交警報。通過做一些研究，我已經想出瞭如何使用ajax發佈，但無法使用甜蜜警報正常運行以顯示警報。

ajax的甜蜜警報 - 無法找出帖子後的回覆消息

的index.html：

<!DOCTYPE html> 
<html> 

<head> 
    <link data-require="[email protected]*" 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="[email protected]*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
    <script data-require="[email protected]*" 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

來源

2016-05-30 sohal07

您的代碼似乎是做工精細，但你process.php拒絕形式 - 它需要一個「文件」字段有（「信息」：「文件要求」）。 –

@denis：什麼樣的文件？ – sohal07

也許你必須解析你的反應後，你的工作在你的PHP條件。只需使用JSON在ajax中返回awer，解析它，然後使用甜言蜜語來顯示消息。請看下面的例子：

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

來源

2016-05-30 03:30:52

ajax的甜蜜警報 - 無法找出帖子後的回覆消息

回答

相關問題