javascript — Sweet Alert с ajax — не может понять ответное сообщение после публикации
Я хочу использовать Sweet 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
Решение
Возможно, вам придется проанализировать ваш ответ после того, как вы поработали с ним в ваших условиях php. Просто используйте JSON для возврата ответа в вашем ajax, проанализируйте его и затем используйте «сладкое оповещение» для показа сообщения. Пожалуйста, посмотрите этот пример:
<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;
}
?>
Другие решения
Других решений пока нет …