从php(SweetAlert)获取回复

时间:2015-11-19 10:08:38

标签: javascript jquery html ajax sweetalert

我想让表单html看起来像这样:

<script>
    function name()
    {
        var name = $('#name').val();
        var url_send     = 'send.php';

        $.ajax({
            url     : url_send,
            data    : 'name='+name,
            type    : 'POST',
            dataType: 'html',
            success : function(pesan){
                    $("#result").html(pesan);
            },
        });
    }
    </script>
    <script src="assets/bootstrap-sweetalert.js"></script>
    <script src="assets/sweetalert.js"></script>
      <link rel="stylesheet" href="assets/sweet-alert.css">
        <form action="#" method="post">
        <label>Name</label>
        <input type="text" name="name"><br>
        <input type="submit" onclick="name();">
    <div id="result"></div>

这是send.php

<?php
$name = $_POST['name'];
if($name) {
echo 'success';
} else {
echo 'failed';
}
?>

问题是,我如何展示SweatAlert模态,当php的结果是Success时,Sweatalert会显示Success Modal。当failed它会显示Failed Modal时? 现在我必须编辑什么来编写我的脚本?

2 个答案:

答案 0 :(得分:0)

我希望你期待jquery ajax的代码;
见下面的代码;
的index.php

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>

<link rel="stylesheet" type="text/css" href="sweetalert-master/dist/sweetalert.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="sweetalert-master/dist/sweetalert.min.js"></script>
<script>
$(document).ready(function () {
$("#submit").on("click", function(e){
    e.preventDefault();
    var name_val = $("#name").val();
    $.post( "send.php", {name_send:name_val}, function(data){
        if (data == 'success'){
            swal("Good job!", "Nice work!", "success");
            return false;
            }else{
            swal("Here's a message!", "Please type a name");
            }
    });
});


});

</script>
</head>
<body>
<form>
<label>Name</label>
<input type="text" name="name" id="name"><br>
<input type="submit" id="submit">
</form>
</body>
</html>


send.php

<?php
$name = $_POST['name_send'];
if($name) {
echo 'success';
} else {
echo 'failed';
}
?>

答案 1 :(得分:0)

$.ajax({
        url     : url_send,
        data    : {name: name},
        type    : 'POST',
        dataType: 'html',
        success : function(pesan){
                $("#result").html(pesan);
        },
    });

在你放置{a}的ajax代码data : 'name='+name,中,请看看我做了什么,也许有帮助

Jquery ajax接受数据参数data: {key:value}中的对象。在这个问题中,我们使用字符串作为jquery ajax数据的参数