jQuery.ajax: первые шаги. Это не идет в URL

Question

У меня есть этот код ниже.Я ожидал, что после отправки формы она переходит в «/frontend_dev.php/coche1/new», но никогда не идет (я добавил кубик («enter») в соответствующий метод, но «enter» не отображается) ...

<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js'></script>

<script type="text/javascript">
$(document).ready(function () {
    $('.formulario').submit(function () {
        form_data = $.param($(this).serializeArray());
        $.ajax({
            url: "/frontend_dev.php/coche1/new",
            type: "POST",
            data: form_data,
            success: function () {
                alert("Data Saved: ");
            }
        });
    });
});
</script>


<form class="formulario" id="1">
    <input type="submit" value="Save">
    <label for="coche1_marca">Marca</label>
    <input type="text" id="coche1_marca" value="FJSDF" name="coche1[marca]">  
    <label for="coche1_modelo">Modelo</label>
    <input type="text" id="coche1_modelo" value="FJSDÑF" name="coche1[modelo]">  
</form>

Любая помощь?

С уважением

Хави

Answer 1

Вы должны иметь возвращаемое значение false в конце вашего обработчика .submit().В противном случае он запускает AJAX, но затем сразу же отправляет форму, что приводит к перезагрузке страницы, поскольку в самой форме нет никаких действий.Добавление return false показывает, что AJAX срабатывает, как и ожидалось.

Answer 2

Вы ничего не делаете для предотвращения действия по умолчанию отправки формы, поэтому он отправляет ее по URL-адресу, указанному в атрибуте действия (хотя, поскольку вы не включили этот обязательный атрибут, он использует текущий URL вместо). Это происходит до того, как возвращается запрос XHR, поэтому метод успеха никогда не срабатывает.

Answer 3

Используйте это

...
$('.formulario').submit(function (event)
{
     event.preventDefault(); // This will stop the form from submitting.
     ...
     return false; // Should also stop the form from submitting, but have ran into cases where it does not. Still, include it for good measure.
}

Вот некоторые дополнительные вещи, которые следует иметь в виду в отношении аргумента события:

event.preventDefault() // Stops default actions, link redirection, form submission, etc...
event.stopPropagation() // Stops the event from propagating up the DOM tree.
event.stopImmediatePropagation() // Stops the current event and ALL other events on the element from propagating any further up the DOM tree.

Дополнительную информацию о распространении событий в JQuery смотрите здесь: http://www.c -sharpcorner.com / UploadFile / satisharveti / 665 / Default.aspx