2

我承认，我是 AJAX 的新手，我一直只是以老式的方式提交表单，并在表单本身上有一个 post 操作，这很好。现在我正在尝试使用 jQuery validate 插件通过 AJAX 在 jQuery 中提交表单。

我还没有检查我的服务器端验证，我只是想确保我可以验证并提交我的客户端信息。我找不到将它们放在一起的单一资源。我可以找到很多关于使验证工作的信息，并且我找到了关于通过 AJAX 发布的信息，但我似乎无法将它们全部串在一起。

我的提交代码有点像这样：

$(function() {
$("#contactForm .submit-button").click(function() {
    var Name = $("#Name").val();
    var Phone = $("#Phone").val();
    var Email = $("#Email").val();
    var Message = $("#Message").val();
    var dataString = 'Name=' + Name + '&Phone=' + Phone + '&Email=' + Email + '&Message=' + Message;

    $.ajax({
    type: "POST",
    url: "scripts/contactengine.php",
    data: dataString,
    success: function(){
        $('#contactForm').fadeOut(1000);
              $('.thanks').fadeIn(1000);
    }
    });
    return false;

});

})

但是，似乎我必须使用 jQuery 验证的提交处理程序：

$("#myForm").validate({
rules: {
    command: 'required'
},

messages: {
    command: 'Please enter a command.'
},

submitHandler: function(form) {
    $(form).ajaxSubmit({
        success: function(data) { /* ... */ },
        url: form.action,
   });

我的问题是我已经尝试了几种不同的方法来将我的代码组合在一起，但我似乎无法创造任何魔法......我也进行了一些搜索，但我什么也没想到.

我希望有人可以帮助解释我需要做些什么才能将它组合在一起，如果有人可以推荐一个很好的资源来使用这种方法在 PHP 中进行服务器端验证，我将非常感激。

谢谢！

4

1 回答 1

3

.ajaxSubmit使用 jQuery 表单插件。如果您没有包含它，您将收到一个脚本错误，您可以在任何浏览器控制台中看到该错误。ajaxSubmit is not a funcion将根据浏览器阅读或类似内容

您可以采取多种方法。

在验证插件之外定义您的提交处理程序并删除 submitHandler 选项：

$("#contactForm").submit(function() {
      var $form=$(this)
    /* don't need to manually code each key/value pair*/
    var data= $form.serialize()

    $.ajax({
    type: "POST",
    url: "scripts/contactengine.php",
    data: data,
    success: function(){
        $form.fadeOut(1000);
              $('.thanks').fadeIn(1000);
    }
    });
    return false;

});

或者在验证插件的 submitHandler 选项中调用自己的 ajax：

submitHandler: function(form) {
   var data= $(form).serialize()

        $.ajax({
        type: "POST",
        url: "scripts/contactengine.php",
        data: data,
        success: function(){
            $(form).fadeOut(1000);
                  $('.thanks').fadeIn(1000);
        }
        });
    return false;
}
于 2012-10-30T13:50:24.840 回答