Ajax提交表单,并检索成功/错误


Ajax to submit form, and retrieve success/error

我使用jQuery和Ajax将表单提交给PHP脚本。

用户将输入他们的详细信息,单击提交按钮,PHP脚本将运行,并且将执行所需的操作或失败。

此时,我希望根据错误类型显示成功或错误消息。

<script>
$( "#contact-form" ).submit(function(event) {
    event.preventDefault();
    $.ajax({
        url: "includes/contact-us.php",
        type: "post",
        data: $("#contact-form").serialize(),
        success:function(data) {
         alert(data);
        },
        error:function(){
            alert("failure");
        }   
    }); 
});
</script>

因此,在我上面的jQuery中,当表单提交时,它会阻止默认的action="path to script.php",然后执行提交。我这样做是为了防止用户禁用Javascript,所以至少基本功能会存在。

PHP

<?php                  
    if(isset($_POST['contact']) && !empty($_POST['contact'])){
            $link = new mysqli("example", "example", "example", "example");
            if($link->connect_errno > 0) {
                die('Unable to connect to database [' . $link->connect_error . ']');
            }
            $name = $_POST['name'];
            $email = $_POST['email'];
            $website = $_POST['website'];
            $subject = $_POST['subject'];
            $message = $_POST['message'];
            $stmt = $link->prepare("INSERT INTO contact (name, email, website, subject, message) VALUES (?, ?, ?, ?, ?)");
            $stmt->bind_param("sssss", $name, $email, $website, $subject, $message);
            if($stmt->execute()){
                $rtn = "Success";
                echo json_encode($rtn);
                } else {
                $rtn = "Failed";
                echo json_encode($rtn);
            }                              
            $stmt->close();
            $link->close();
}

但是,在本例中,一个警告框显示为空。firebug或Apache日志中没有错误。

是否可以:当我使用Ajax执行提交时,我可以收到一个echo "Text from error or success box";,然后将其放入引导程序警报中?

我正在编写的代码是新的,所以我会考虑适应新的库。这纯粹是为了增强UI以显示错误或成功消息,如果用户禁用了javascript,那么表单默认操作不会被阻止——他们只是看不到成功或错误消息。

我看到的是"Javascript承诺",如果Javascript在可用性方面更好的话,我不介意使用它,因为我不想在提交时冻结浏览器。

感谢您抽出时间

您的代码应该看起来像这个

我会从PHP返回一个标准形式的成功/错误。所以失败可能是这样的:

json_encode(['success'=>false]);

然后在Javascript中对此进行操作将如下所示:

$.ajax({
    url: "includes/contact-us.php",
    type: "post",
    data: $("#contact-form").serialize(),
    success:function(data) {
        data = JSON.parse(data);
        if (data.success)
            alert('success!');
        else
            alert('got failure response from PHP');
    },
    error:function(){
        alert("failure");
    }   
}); 

您可以在php中使用try-catch()

<?php
    // ...
    try{
       // your code
       $msg = 'Success';
       return json_encode($msg);
    }catch(Exception $e){
       $msg = 'Error';
       return json_encode($msg);           
    }

?>