jquery查询：在没有新页面加载的情况下传递消息

Question

请原谅这个问题的尴尬，老实说，我不知道如何表达更好的查询......

情况：

我在xhtml / php页面中有一个基本联系表单，我正在升级。我最近在这个页面上添加了一个新的无关的jquery插件，所以我想使用jquery功能来帮助进行一些简单的表单验证。验证已经通过PHP在联系表单提交的单独文件中完成。

我想要发生的是，将PHP验证消息传递回主（联系表单）页面，而不需要新的页面加载。我已经通过某个地方的jquery看到了这一点，但我似乎无法在这里或通过谷歌再次找到它。有人可以帮忙吗？

我真的在寻找速度和简洁性，乍一看，jquery验证插件的大小和复杂性令人生畏，所以我不愿意走上那条特定的路线......

Answer 1

你正在寻找的东西被称为AJAX，并没有什么难的，特别是对于jQuery！将数据发送到PHP进行验证的问题在于它会立即修改您对“速度”的要求 - 当Javascript向服务器发出请求以查看是否一切正常时，表单需要挂起。出于这个原因，通常的做法是在服务器和客户端进行验证。注意我说的都是，因为你应该总是验证服务器上的数据。

考虑到这一点，让我们开始吧！我将展示如何在不使用验证插件的情况下验证表单 - 对于更大的项目，您可能需要考虑它，但如果没有它就很容易：

<form id='myform' action='whatever.php' method='POST'>
First Name: <input type='text' name='first_name' class='required'><br>
Last Name: <input type='text' name='last_name'><br>
Email: <input type='text' name='email' class='required'><br>
Zip: <input type='text' name='zip'><br>
</form>

因此，您可以看到我们的名字和电子邮件中包含一系列必需的名称，因此我们可以这样做：

$(function() { // wait for the document to be loaded
    $('#myform').submit(function() {
        var valid = true; // assume everything is okay
        // loop through each required field in this form
        $('input.required', this).each(function() {
            // if the field is empty, mark valid as false
            // and add an error class
            if($.trim($(this).val()) == '') {
                valid = false;
                $(this).addClass('error_input');
            }
        });

        // additional validation for email, zip, perhaps

        return valid; // if valid is true, continue form submission
    });
});

验证插件使这一切变得更整洁，更清洁，但如果您只需要快速表单，则上述方法没有任何问题。它确实很糟糕，因为你必须在两个地方都有你的验证规则，但除了在服务器上执行Javascript或调用服务器获取数据之外，如果你想快速告诉你的用户出了什么问题，别无选择。

希望这有帮助。

编辑：似乎我误解了你的问题。如果您想将表单数据传递给PHP脚本，让它验证值，并将成功或错误返回到页面而不加载，您可以这样做：

$('#myform').submit(function() {
    // allow submit if we've validated this already
    if($(this).data('done')) return true;
    var data = $(this).serialize(); // serialize the form data
    // you could get the two variables below from the actual form (DRY)
    // with $(this).attr('action'); and $(this).attr('method'); but I am
    // not sure if that is what you want...
    var action = 'validate.php'; // what script will process this
    var method = 'POST'; // type of request to make
    $.ajax({
        type: method,
        url: action, 
        data: data,
        dataType: 'json',
        success: function(d) {
            if(d.code == 'success') {
                 // everything went alright, submit
                 $(this).data('done', true).submit();
            } else {
                 alert('something is wrong!');
            }
        }
    });
    return false; // don't submit until we hear back from server   
});

然后你的所有PHP脚本都必须使用json_encode返回这样的内容，以表明一切是否正常：

// verify everything...
// data will be in $_POST just like a normal request
if($everythingOK) {
    $code = 'success';
} else {
    $code = 'error';
}
print json_encode(array('code' => $code));
exit;

我还没有测试过上面的Javascript，但我很确定它应该是正确的。我希望这个有所帮助。 ：）