这是我在Laravel应用程序中的表单html:
<button onclick="submitForm()">submit form using jquery ajax</button>
<form name="fbCommentCountform" action="{{ route('blogs.update', ['id'=>$id]) }}">
{{ csrf_field() }}
<input type="hidden" name="_method" value="PUT">
<input type="text" name="commentCount" id="fbFormCommentCount">
</form>
这是我尝试使用的 ajax Javascript 代码:
function submitForm() {
var http = new XMLHttpRequest();
http.open("POST", "{{ route('blogs.update', ['id'=>$id]) }}", true);
http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var params = "search=";
http.send(params);
http.onload = function() {
alert(http.responseText);
}
}
我对如何定义参数以使其在我的 id #fbFormCommentCount 输入框中发送数据有点困惑。我只是希望表单在单击按钮时提交,而无需重新加载页面并使用 PUT 方法,因为它用于控制器中的更新请求。任何指导将不胜感激!
使用jQuery的.ajax()
非常轻松地做到这一点,如下所示:
$('form').on('submit', function(e){
e.preventDefault();
var $this = $(this);
$.ajax({
url: $this.prop('action'),
method: 'PUT',
data: $this.serialize(),
}).done(function(response){
}).error(function(err){
});
});
e.preventDefault()
将阻止表单提交并导致页面刷新。
然后只需将按钮移动到表单中并给它一个type
submit
<button type="submit"> Submit form using jquery ajax </button>
您需要阻止表单提交的默认事件。
这是一个如何做到这一点的最小示例
https://jsfiddle.net/w208gsj7/1/
.HTML
<form>
<button type="submit"id="submit">
Submit
</button>
</form>
.JS
document.getElementById('submit').addEventListener('click', submitForm);
function submitForm(ev) {
ev.preventDefault();
// ... code
}
您需要从表单中获取值,如下所示:
var commentCount = document.getElementById('fbFormCommentCount').value,
params = "commentCount=" + commentCount;
您还需要获取并附加您的_method
字段和 csrf 令牌。 如果他们没有 ID,您可以按名称抓取它们:
var method = document.getElementsByName('_method')[0].value,
token = document.getElementsByName('_token')[0].value;
对于那些感兴趣的人,我可以在不重新加载页面的情况下在Laravel中提交表格。我在使用 AngularJs 时这样做了,因此必须将所有内容都放在 $(function(){} 中;这样:
$(function()
{
$('form').on('submit', function(e)
{
e.preventDefault();
var $this = $(this);
$.ajax({
url: $this.prop('action'),
method: 'POST',
data: $this.serialize(),
success: function(result)
{
console.log(result);
}
});
});
});
注意:较新版本的 JQuery 使用"success:"而不是".done"。希望这对使用较新版本的人有所帮助。