jQuery.validate无法通过Ajax处理帖子

Question

我有点困惑。 我建立简单的形式：

<form id="simple-contact">
<input type="text" id="client-name" name="clientname" class="textF" placeholder="Imię i Nazwisko*"/>
<input type="text" id="client-mail" name="clientmail" class="emailF" placeholder="E-mail*"/>
<input type="text" id="client-phone" name="clientphone" class="textF" placeholder="Nr telefonu"/>
<textarea id="client-massege" name="clientmassage" class="textareaF" placeholder="Wpisz wiadomość"></textarea>
<input type="submit" id="client-wysylka" name="clientwysylka" value="Wyślij" class="btnF"/>
</form>

我使用jQuery验证插件，并希望通过Ajax提交表单。 所以我写了这段代码：

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.validate.min.js"></script>    
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/additional-methods.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
    $('#simple-contact').validate({
     onfocusout: function (element) {
     $(element).valid();
     },
      rules: {
   clientname: "required",  
   clientmail: {                
      required: true,
      email: true
    },
      clientphone: {
      required: true,
      matches: "[0-9]",
      minlength:9,
      maxlength:9
    },
    clientmassage: {
          required: true
    }

},
    submitHandler: function(form) {
        request = $.ajax({
            type: "POST",
            cache: false,
            url: "http://www.wytworniaprojektu.eu/formularze/form-simple-wrapp-send.php",
            data: $(form).serialize(),
            timeout: 3000
            success: function() {alert('Done');},
            error: function() {alert('Error');}
    });

    return false;
    },
    messages: {
    clientname: "Podaj Imię i Nazwisko",
    clientmail: {
      required: 'Pole e-mail jest wymagane',
      email: 'To nie jest prawidłowy adres e-mail'
    },
    clientphone: {
      required: 'Musisz podać nr telefonu',
      matches: 'Numer musi zawierać 9 cyfr'
    },
    clientmassage: 'Wpisz wiadomość',
    },
    errorPlacement: function(error, element) {
    if(element.is(":radio") || element.is(":checkbox")) {
    error.appendTo(element.parent());
    }
    else {
    error.insertAfter(element);
    }
    },
   });
   });

我也尝试过此解决方案https://stackoverflow.com/a/17627502/2801980

但仍然无法正常工作，我的意思是表单未发送（猜测未从ajax url（操作路径）获取代码。我看不到任何警报和提交将我重定向到同一页面。

观看实战http://www.wytworniaprojektu.eu/#contact-form

Answer 1

好吧，这里发生的是您的ajax作品。 它发送请求并接收响应。 我想您现在设置的方式是当您收到任何重定向的响应时。 问题是响应是错误。

您可能应该向服务器端发出ajax请求，服务器端应向某些任务发出请求，然后基于该任务将响应返回给javascript。

因此，假设您在服务器端将信息保存到数据库中。 如果一切正常，则应返回JSON，例如{status：1}。 如果服务器端发生任何错误，您可能希望捕获它们并返回{status：0}。

现在在您的JavaScript中

success: function(data) { 
   if(data.status) { 
         // do the redirect 
   } else { 
         // handle error 
   }
}