Jquery 将JSON表单错误响应转换为html字符串_Jquery_Ajax_Json

Jquery 将JSON表单错误响应转换为html字符串

jquery ajax json

Jquery 将JSON表单错误响应转换为html字符串,jquery,ajax,json,Jquery,Ajax,Json,既然我找不到解决问题的办法，我可能会把这件事搞错我正在尝试使用AJAX构建一个表单，在提交表单时提供错误响应或成功响应。我能够将错误响应发送到我的表单，但它是JSON格式的，这显然看起来很糟糕。目前，我使用的是一个简化的表格，只有两个要求：1姓名必须是John，2日期必须是将来这是我的html： <!DOCTYPE html> <head> <title>AJAX Form</title> </head> <body&

既然我找不到解决问题的办法，我可能会把这件事搞错

我正在尝试使用AJAX构建一个表单，在提交表单时提供错误响应或成功响应。我能够将错误响应发送到我的表单，但它是JSON格式的，这显然看起来很糟糕。目前，我使用的是一个简化的表格，只有两个要求：1姓名必须是John，2日期必须是将来

这是我的html：

<!DOCTYPE html>
<head>
    <title>AJAX Form</title>
</head>
<body>

    <form action="ajax/contact.php" method="post" class="ajax">
        <div>
            <input type="text" name="name" placeholder="Your name">
        </div>
        <div>
            <input type="text" name="email" placeholder="Your email">
        </div>
        <div>
            <input type="text" placeholder="" class="textinput" name="departuredate" id="departing">
        </div>
        <div>
        <textarea name="message" placeholder="Your message"></textarea>
        </div>
        <input type="submit" value="Send">
    </form>

    <div id="ack"></div>

    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.10.4.custom.js"></script>

    <script>
    $(document).ready(function() {

        $("#departing").datepicker({
            //minDate: 0,
            //maxDate: "+1y",
            dateFormat: "yy-mm-dd",
            defaultDate: new Date(),
        });
    });
    </script>
</body>
</html>

谢谢

“它继续添加额外的JSON，而不删除以前的错误响应”–恭喜，您找到了“append”这个词的含义。如果您不希望出现这种行为，请改用.html。既然您在JSON响应中得到了一个错误消息数组，那么您应该循环处理该数组，并分别处理每个错误消息–或者在将错误消息放入文档之前将其合并到一个值中。为什么在使用goto-yuck时将错误设为一个数组！确保它只包含一个元素？只需使用一个字符串，并从js函数中删除JSON.stringify。并使用.html。。。而不是。附加。。。如果你想overwrite@CBroe我同意你是愚蠢的，我是绿色的@user574632我确实使用了goto，所以一次只有一条错误消息。我不应该那样做吗？如何将错误作为字符串获取？使用.htmlresult.errors不会产生结果。。。Thanks@user3358753使用循环进行迭代。@user3358753在php中删除$errors=array；在单独的bloc中使用$errors=错误消息，然后使用.htmlresult.errors；在你的js中

<?php

$errors = array();
$form_data = array();

$name = htmlspecialchars($_POST['name']);
$email = htmlspecialchars($_POST['email']);
$date = htmlspecialchars($_POST['departuredate']);
$message = htmlspecialchars($_POST['message']);

if (date('Y-m-d') > $date) {
$errors['date'] = "Date is in the past";
goto end;
}
if ($name != 'John') {
$errors['name'] = "Name is not John";
goto end;
}

end:

if (empty($errors)) {
$form_data['success'] = true;
} else {
$form_data['errors'] = $errors;
}
echo json_encode($form_data);
?>

$('form.ajax').on('submit', function() {
var that = $(this),
    url = that.attr('action'),
    type = that.attr('method');

$.ajax({
    url: url,
    type: type,
    data: that.serialize(),
    dataType: 'json',
    cache: false,
    success: 
        function(result) {
        if(!result.success) {
            $('#ack').html(JSON.stringify(result.errors));
            console.log(result.errors);
        } else {
        console.log('Valid date and name entries');
        }
    }
});

return false;
});