Jquery代码提交表单呈现非预期行为

jquery code to submit form present non expected behavior

本文关键字：代码 提交 表单 Jquery      更新时间：2023-09-26

在我的春季项目中，我有这个名为 sbmitt .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>

不是从服务器捕获响应并用于显示两个响应中的一个，应用程序显示一个带有此响应的空白页面。

谁能告诉我我做错了什么?

p。:服务器端接收客户端请求的方法都是这样的结构:

@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";
}

这段代码表明您有多个具有相同id的元素:

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

如果是这种情况，那么这是一个无效的标记，因此您将面临浏览器的一些意外行为。

解决方案是将id更改为classname，如class='target'，并在js选择器$(".target")中更改少量

好了，我终于弄清楚发生了什么:我是如何使用一个唯一的方法为所有的页面，我只需要改变函数从:

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

: 

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

现在一切正常

相关文章：