2

我使用一点 jquery、ajax 和 php 创建了一个表单。ajax、验证和 php 处理运行良好。我想出了以下代码来在提交后隐藏我的表单，但我不知道这是否是这样做的好方法。我想听听你的建议。

在带有ajax调用的js脚本下方

<script type="text/javascript">
$(document).ready(function(){
$("#submitContact").click(function() {
    $.ajax({
    cache: false,
    type: 'POST',
    url: 'form/process.php',
    data: $("#contact_form").serialize(),
    success: function(response) {
        $("#formstatus").hide().html(response).slideToggle(600);
    }
    });
});
});
</script>

上面的代码将调用 php 进行验证并填充 div#formstatus 以通知用户是否发送了表单。

在我的 process.php 中，如果使用 echo js 脚本没有发现错误，我将隐藏表单。

// If no errors found echo succes message
if (!($formerrors)) :

    //Hide the form
    echo '<script type="text/javascript">
            $(document).ready(function(){
               $("#contact_form").hide();
            });
          </script>';

    // display success message
    echo '<div>
            Your message has been sent. <br />
            Thank you for contacting us!
          </div>';

    Etc....

总结一下：

我应该使用这种方法来隐藏我的表单吗？（因为它确实有效）

注意。我是 jquery 和 ajax 的新手 :)

4

3 回答 3

3

我认为最好返回一个包含与请求相关的信息的 JSON 对象。

例如：

if (!($formerrors)){
    echo json_encode(array(
        'success'=> true,
        'message'=> 'Your message has been sent. <br> Thank you for contacting us!'
    ));
}
else{
    echo json_encode(array(
        'success'=> false,
        'message'=> 'Error processing form',
        'errors'=> array(
                        'phone'> 'A phone number is required'
                    )
    ));
}

这将很容易在客户端使用（jQuery 将自动解析 json）

<script type="text/javascript">
$(document).ready(function(){
$("#submitContact").click(function() {
    $.ajax({
    cache: false,
    type: 'POST',
    url: 'form/process.php',
    data: $("#contact_form").serialize(),
    success: function(response) {
        if(response.success){
            $("#formstatus").hide().text(response.message).slideToggle(600);
        }
        else{
            jQuery.each(response.errors,function(){ ... });
        }
    }
    });
});
});
于 2013-06-24T02:09:56.600 回答
2

如果您将显示问题与功能问题分开，我认为您会发现您拥有更易于管理的代码。对于 php，我同意 Walkerneo。

Javascript AJAX 成功处理程序

success: function(response) {

    var response = $.parseJSON(response);

        if(response.status === 'true') {

            $("#formstatus").hide().html(response.message).slideToggle(600);
            $("#contact_form").hide();

        } else {

            $("#formstatus").hide().html(response.message).slideToggle(600);

        }
}

PHP

if(!$formerrors) {
    exit(json_encode(array('status' => 'true', 'message' => 'Your message has been sent. \n Thank you for contacting us!')));

} else {

    $message = '<p class="error">' . implode('</p><p>', $formerrors) . '</p>';

    exit(json_encode(array('status' => 'false', 'message' => $message)));

}
于 2013-06-24T02:27:16.487 回答
0

我建议避免使用这种方法。相反，您应该返回有关状态和消息的信息以显示给用户。例如，以下是您无需重新加载页面即可执行此操作的方法。

演示（将接受非空白数据）

我们阻止默认事件，以便页面不会重新加载。由于以下 HTML 更改，我们还可以使或编码更通用。 

$('form').submit(function(e){
    e.preventDefault();
    var $this = $(this);
    $.ajax({
        cache: false,
        type: 'POST',
        url: 'URLHERE',
        data: $(this).serialize(),
        dataType: 'jsonp',
        success: function(response) {

我们在这里显示错误或成功消息。根据status字段，我们将文本设为绿色或红色，并决定是否隐藏表单。

            $("#formstatus").hide().text(response.msg).show(600);
            if (response.status === "success") {
                $this.hide();
                $("#formstatus").css({color: "green"});
            }
            else {
                $("#formstatus").css({color: "red"});                   
            }
        }
    });
    return false;
});

我们的 PHP 只返回一个 JSON 对象。

function callback($data){
    $json = json_encode($data);
    return $json;
}

if ($valid === true) {
    echo callback(
        array(
            "msg" => "Your message has been sent.\nThank you for contacting us!", 
            "status" => "success"
        )
    );
}
else {
    echo callback(
        array(
            "msg" => "Please fill in all fields.", 
            "status" => "error"
        )
    );
}

HTML 也更改为使用提交按钮，它允许我们以表单而不是按钮为目标。现在可以更轻松地传输代码。

<div id="formstatus"></div>
<form>
    <input placeholder="First Name" name="name">
    <input placeholder="Email" name="email">
    <input placeholder="Comment" name="comment">            
    <input type="submit">
</form>
于 2013-06-24T03:34:22.423 回答