大家好,我有一个 html 表单,我想在成功提交表单后运行 JQuery 代码,我使用了 Laravel,我必须做什么?
最佳答案
如果您使用ajax,则可以使用preventDefault()
,这样表单就不会以“传统”方式提交。 ajax成功后,你就可以将你的逻辑放入success函数中。
例如
$("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 添加到 header 。这是在 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/
关于jquery - 表单提交后如何运行Jquery代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53451274/