Question

我使用了一些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的新手：）

Answer 1

我认为最好返回一个包含与请求相关的信息的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(){ ... });
        }
    }
    });
});
});

Answer 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)));

}

Answer 3

我建议避免使用此方法。您应该返回有关要显示给用户的状态和消息的信息。例如，以下是如何在不重新加载页面的情况下执行此操作。

demo（将接受非空白数据）

我们阻止默认事件，以便页面不会重新加载。由于以下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) {

我们在此处显示错误或成功消息。根据{{1}}字段，我们将文本设置为绿色或红色，并决定是否隐藏表单。

status

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

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

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

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"
        )
    );
}

使用ajax提交后隐藏表单

3 个答案:

demo（将接受非空白数据）