Использование функции jQuery .post в форме пользовательского шаблона WordPress

#jquery #ajax #wordpress #.post

Вопрос:

В настоящее время я создаю пользовательскую контактную форму на сайте WordPress, которую пытаюсь отправить через ajax с помощью jQuery, однако, когда я выполняю функцию $.post, firebug сообщает об ошибке 404 в консоли, хотя я могу ввести URL в свою адресную строку и правильно отобразить страницу. Я не размещаю междоменную рассылку.

Вот пример моего кода, из которого удален нерелевантный код:

 <form action="" method="post" onsubmit="return submitContactForm()" class="contactform">
 <!-- inputs etc here -->
</form>

<script type="text/javascript">
function submitContactForm() {
  // Omitted error checking here, return false on error
  $.post('/contact'/, $('.contactform').serialize(), function(data) {
    alert(data);
    return false;
  });
  return true;
}
</script>

Сообщение никогда не выполняется успешно, и форма каждый раз отправляется «обычным» способом.

Я перепробовал множество комбинаций в части url $.post, включая /contact / , /contact , contact , /contact/, даже полный URL сайта, но безуспешно. У кого-нибудь раньше была эта проблема? Или я делаю что-то вопиюще неправильное? Мое единственное предположение — это что-то связанное с моей структурой / % postname% / permalink, кроме этого, я невежественен!

Любые идеи / соображения приветствуются

Спасибо, Энди

1. что такое '/contact'/ ? На какой странице у вас есть данные, которые вы хотите запросить?

2. последующая обработка происходит в header.php файл моей темы WordPress. Поскольку файл .htaccess был отредактирован WordPress с помощью пользовательской структуры постоянных ссылок, / contact выводит меня на страницу «свяжитесь с нами», где header.php обрабатывается

3. какой URL-адрес firebug показывает вам при запуске ajax? Я не могу найти никакой информации об этом. Очень странно, что ни у кого нет этой проблемы.

Ответ №1:

Это в документации jQuery:

Это сокращенная функция Ajax, которая эквивалентна:

 $.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success
  dataType: dataType
});

Попробуйте это:

         $(function()
        {
            $("button#send").click(function() {
                $.ajax({
                    type: "POST",
                    url: "post.php",
                    data: $("#form").serialize(),
                    success: function(msg){
                        $("#msg_ok").html(msg);
                        $("#form").reset();
                        //alert(msg);
                    }
                });
            });
        });

1. Спасибо, но это не факт, что данные не публикуются. Он пытается выполнить post, но не получает ответа от сервера

2. Извините, должен был опубликовать в качестве комментария.

Ответ №2:

Я, наконец, понял, что происходит. В основном ajax post выполнялся синхронно, поэтому до получения ответа скрипт продолжил обработку

Добавление async: false к вызову $.ajax решило проблему

Спасибо за помощь