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

Question

大家好我有一个html表单，我想在成功提交表单后运行JQuery编码，我使用了Laravel，我必须做什么？？

Answer 1

如果您使用 ajax，则可以使用 preventDefault()，这样就不会提交表单 'traditionally'。在 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 请求。

别忘了

如果您使用 HTTP 方法 而不是 GET，请将 CSRF TOKEN 添加到 headers。这是您在 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

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

How run Jquery code after form submission

html

forms

jquery

form-submit

laravel