表单提交后如何运行Jquery代码

时间:2018-11-23 18:09:42

标签: jquery html5 laravel forms form-submit

嘿,每个人都有html表单,并且我想在成功提交表单后运行JQuery代码,我使用了Laravel,我该怎么办?

1 个答案:

答案 0 :(得分:1)

如果您使用的是Ajax,则可以使用preventDefault(),这样就不会“传统地”提交表单。在ajax成功之后,您可以将逻辑放入成功函数中。

例如

$("form").submit(function(e){
  e.preventDefault();
  $.ajax({
       method: 'POST' //assume its a post method
       url: '{{url(cats)}}', //the route endpoint
       data: data //data to be sent
       success: function(response) { 
         // logic goes here, it means form submission is successful
       },
       error: function(e){
         // error has occured
         console.log(e)
       }
   });
});

确保在您的表单元素中将操作设置为主题标签并删除方法。因此它传统上不会执行。

例如

<form action="#">

为什么使用这种方法?

如果传统上发送表单,它将刷新页面,这意味着将不会执行客户端JS! Ajax用于异步HTTP请求。

不要忘记

如果您使用的是 GET 以外的 HTTP方法,请将CSRF TOKEN添加到标头中。这是在ajax调用之前进行设置的方式。

<meta name="csrf-token" content="{{ csrf_token() }}"> //add to head section 

 //js - before your ajax function, put in script section
$.ajaxSetup({
headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});

祝你好运!


参考:

https://api.jquery.com/event.preventdefault/

https://api.jquery.com/jQuery.ajax/

https://laravel.com/docs/5.7/csrf