JQuery код для отправки формы присутствует непредвиденное поведение

0

В моем весеннем проекте у меня есть файл sbmit.js, где у меня есть следующий код для отправки всех моих форм:

$('.form').submit(function( event ) {
    // Stop form from submitting normally
    event.preventDefault();

    // Get some values from elements on the page:
    var $form = $( this ),
    url = $form.attr( "action" );

    // Send the data using post
    var posting = $.post( url, $(this).serialize() );

    // Put the results in a div
    posting.done(function( data ) {
        $("#"+data).show();

        $("#target").each (function(){
            this.reset();
        });
    });
});

function md5() {
    var senha = $(this).val();
    $("input[name=senha").val($.md5(senha));
}

Но когда я пытаюсь представить любую форму, например, вот так:

  <c:url value="/categoria/cadastra" var="cadastraCategoria"/>
  <form class="form" role="form" action="${cadastraCategoria}" method="post">
      <p>
        <label for="nome">Nome</label>
        <input type="text" name="nome" class="form-control" placeholder="Nome" autofocus>
      </p>
      <p>
        <button type="submit" class="btn btn-lg btn-default">Cadastrar</button>
      </p>
  </form>

  <div id="yes" class="alert alert-success">
    <strong>Pronto!</strong> Categoria cadastrada com sucesso.
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
  </div>

  <div id="not" class="alert alert-danger">
    <strong>Erro!</strong> N&atilde;o foi possivel cadastrar a categoria.
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
  </div>

вместо захвата ответа с сервера и использования для отображения одного из двух, приложение отображает пустую страницу с этим ответом.

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

ps.: метод на сервере, который получает заявку от клиента, имеет всю эту структуру:

@RequestMapping(value="cadastra", method=RequestMethod.POST)
@ResponseBody
@PreAuthorize("hasPermission(#user, 'cadastra_categoria')")
public String cadastra(HttpServletRequest request, HttpServletResponse response) {
    if(categoria.cadastra(request, response))
        return "yes";
    else
        return "not";
}
  • 0
    ты отлаживал свой JS?
  • 0
    да, в консоли не отображается ошибка и форма отправляется на сервер и данные хранятся в базе данных, только возвращаемое не представляет ожидаемого поведения.
Показать ещё 7 комментариев
Теги:
forms

2 ответа

0
Лучший ответ

Итак, я наконец понял, что происходит: как я использую один уникальный метод для всех страниц, мне просто нужно изменить функцию:

$('.form').submit(function( event )

чтобы:

$(document).on('submit', '.form', function (event) {

и теперь все работает нормально.

0

Этот код говорит, что у вас несколько элементов с одинаковым идентификатором:

$("#target").each (function(){
    this.reset();
});

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

Решение этого - это изменение идентификаторов классаNames, таких как class='target' и малое изменение в js selector $(".target").

  • 0
    Хорошо, тогда я исправляю это, но проблема все еще происходит.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню