Почему происходит обновление страницы при использовании ajax?

Question

[Сергей]

Есть следующий код, при отправке формы происходит обновление страницы и не передаются значения радио кнопок. В чем может быть причина?

add_action('admin_menu', 'defense_menu');
function defense_menu() {
    add_options_page('Настройки защиты сайта', 'Защита сайта', 'administrator', 'defense.php', 'defense_page');
}

function defense_page(){?>
    <div id="primer"></div>
    <h4>Какой редирект использовать?</h4>
    <form id="form" method="POST">
        <input type="radio" name="redirect" value="bezwww" checked="checked"> с www на без www &emsp;
        <input type="radio" name="redirect" value="swww"> с без www на с www
        <br><br>
        <button id="btn" style="float: left;">Переписать .htaccess</button>
        <h4 style="float: left; margin:3px 0 0 10px;">&lArr; Не нажимать!</h4>
    </form>
<?php
}

add_action('admin_footer', 'my_action_javascript');
function my_action_javascript() {
    ?>
    <script type="text/javascript" >
        jQuery('#form').submit(function () {
            jQuery.ajax({
                type: "POST",
                url: ajaxurl,
                data: {action: "my_action"},
                beforeSend: function () {
                    jQuery('#primer').html('<img src="/img/loading.svg">');
                },
                success: function () {
                    jQuery('#primer').html('Данные изменены');
                }
            });
        });
    </script>
<?php
}

add_action('wp_ajax_my_action', 'my_action_callback');
function my_action_callback() {
    $site_name = $_SERVER['SERVER_NAME'];
    switch ($_POST['redirect']) {
        case "bezwww":
            $redirect = "# Склеивание доменов
Options +FollowSymLinks
RewriteCond %{HTTP_HOST} ^www.$site_name\\.ru$ [NC]
RewriteRule ^(.*)$ http://$site_name/$1 [R=301,L]";
            break;
        case "swww";
            $redirect = "# Склеивание доменов
Options +FollowSymLinks
RewriteCond %{HTTP_HOST} ^$site_name\\.ru$ [NC]
RewriteRule ^(.*)$ http://www.$site_name/$1 [R=301,L]";
            break;
        default:
            $redirect = "# Склеивание доменов
RewriteCond %{HTTP_HOST} ^www.$site_name\\.ru$ [NC]
RewriteRule ^(.*)$ http://$site_name/$1 [R=301,L]";
            break;
    }
    $add_info = $redirect;

    file_put_contents('../.htaccess', $add_info);
    wp_die();
}

Answer 1

[Алексей Уколов]

Вы не выполняете event.preventDefault(); при сабмите формы, вот она и перезагружает страницу - это ее стандартное поведение.

jQuery('#form').submit(function (event) {
    jQuery.ajax({
        type: "POST",
        url: ajaxurl,
        data: {action: "my_action"},
        beforeSend: function () {
            jQuery('#primer').html('<img src="/img/loading.svg">');
        },
        success: function () {
             jQuery('#primer').html('Данные изменены');
         }
    });

    event.preventDefault();
});

Comments

[Сергей]

как это сделать?

[Алексей Уколов]

sergafon: есть два пути:
1. Хороший - забить в поисковик event.preventDefault, разобраться в том, что это такое, получить новые знания
2. Плохой - воспользоваться кодом, который я написал в ответе.

[Сергей]

спасибо страница перестала перегружаться, можете сказать почему значения радио кнопок не передаются?

[Алексей Уколов]

Потому что вы их не передаете:
data: {action: "my_action"},
Тут ни слова о содержимом формы.

[Алексей Уколов]

api.jquery.com/serialize

[Сергей]

Алексей Уколов: ок буду читать, я разобрался с event.preventDefault )

[Алексей Уколов]

sergafon: Не забудьте отметить ответ решением, если он вам помог.

[Сергей]

Алексей Уколов: почитал документацию. Остался один вопрос как это все теперь прописать сюда data: {action: "my_action"}?)

[Сергей]

Алексей Уколов: обязательно отмечу, помогите с data)

[Алексей Уколов]

data: $(this).serialize() + '&action=my_action'
Вы бы хоть "пожалуйста" написали...

[Сергей]

Алексей Уколов: извините , что без пожалуйста) Огромное вам спасибо за оперативную помощь, выручили меня ОГРОМНАЯ БЛАГОДАРНОСТЬ ВАМ) Не первый раз меня спасает этот сервис)

[Сергей]

Алексей Уколов: Жаль что тут плюсы нельзя ставить участникам)