Ajax自动提交和刷新页面
所以,我是新来的ajax,我试图使用ajax和jquery提交表单,我想我有服务器端逻辑都想通了,因为当我加载页面它会自动提交并且页面刷新速度非常快。空白表单将进入数据库,但其中有很多内容,因为页面会一直提交每次刷新。所以我认为我的服务器端正在工作,但我不知道要做什么来阻止它刷新,还要使用我在html表单中提交的提交按钮进行提交。我在我的html页面中使用了thymeleaf。Ajax自动提交和刷新页面
这是我的HTML表单,使用thymeleaf
<div id="newCommentForm">
<fieldset>
<div class="form-group">
<textarea rows="2" id="newComment" placeholder="comment" class ="form-control" style="width: 520px;"></textarea>
</div>
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
<input type="submit" value="Comment" class="btn btn-info" />
</fieldset>
</div>
这是我的jQuery和AJAX
<script th:inline="javascript">
/*<![CDATA[*/
var postId = /*[[${post.id}]]*/'1';
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
$(document).ajaxSend(function(e, xhr, options) {
xhr.setRequestHeader(header, token);
});
$(function() {
$.ajax({
url : "newComment",
type : "post",
data : {
"postId" : postId,
"newComment" : $("#newComment").val()
},
success : function(data) {
console.log(data);
location.reload();
},
error : function() {
console.log("There was an error");
}
});
});
/*]]>*/
在此先感谢。
UPDATE
所以现在当我提交表单的页面刷新和URL做一些奇怪的事情,并显示CSRF令牌,并没有提交到数据库中的数据。因此,当我提交http://localhost:8080/viewCourse/post/1?_csrf=abefbd5b-392e-4c41-9d66-d66616fc4cc7
时,如果我取消了所做的更改并将其放回到刷新循环中,并且如果我可以在表单中获取任何文本,在页面刷新之前它实际上会提交到数据库,所以我认为这意味着我有一个有效的网址,因为它有点作品。我真的不知道是什么原因造成的,但表单似乎没有提交正确的信息,只有csrf标记。这里是我的最新的jQuery,Ajax和HTML
jQuery的 //
var postId = /*[[${post.id}]]*/'1';
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
$(document).ajaxSend(function(e, xhr, options) {
xhr.setRequestHeader(header, token);
});
$("#submit").click(function() {
$.ajax({
url : "newComment",
type : "post",
data : {
"postId" : postId,
"newComment" : $("#newComment").val()
},
success : function(data) {
console.log(data);
location.reload();
},
error : function() {
console.log("There was an error");
}
});
});
/*]]>*/
和我的更新HTML
<form>
<div class="form-group">
<textarea rows="2" id="newComment" placeholder="comment" class ="form-control" style="width: 520px;"></textarea>
</div>
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
<input type="submit" value="Comment" id="submit" class="btn btn-info" />
</form>
</div>
您构建您的jQuery来运行,因为它是加载。试着改变你的HTML这样的:
<div id="newCommentForm">
<fieldset>
<div class="form-group">
<textarea rows="2" id="newComment" placeholder="comment" class ="form-control" style="width: 520px;"></textarea>
</div>
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
<input type="submit" id="submit" value="Comment" class="btn btn-info" />
</fieldset>
</div>
和jQuery这样的:
var postId = /*[[${post.id}]]*/'1';
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
$(document).ajaxSend(function(e, xhr, options) {
xhr.setRequestHeader(header, token);
});
$("#submit").click(function(){
$.ajax({
url : "newComment", //assuming this is corrected to url
type : "post",
data : {
"postId" : postId,
"newComment" : $("#newComment").val()
},
success : function(data) {
console.log(data);
location.reload();
},
error : function() {
console.log("There was an error");
}
});
});
这将防止AJAX和电线它的自动点火使用按钮的ID提交按钮。
只需确保更正URL等内容,并确保您的数据在发送之前得到验证等。这只是提供了答案默认情况下未烧制
更新
终于到我的电脑:)
好吧,让我们检查原始代码
/* $(function() {...}); is equivalent to $(document).ready();
* The code wrapped inside will be executed once the page is
* ready (loaded properly).
*/
$(function() {
// $.ajax() fires as soon as page is ready, causing it to be
// called "automatically"
$.ajax({
url : "newComment",
type : "post",
data : {
"postId" : postId,
"newComment" : $("#newComment").val()
},
success : function(data) {
// This is called as soon as the AJAX is completed...
console.log(data);
location.reload(); // ... and this refreshes the page, causing loop
},
error : function() {
console.log("There was an error");
}
});
});
我的问题我不确定您的HTML,但如果submit
按钮位于<form>
之内,那么您可以使用$(SELECTOR).submit()
。但下面的示例将基于您的HTML。
首先你需要添加一个id到提交按钮(任何好的选择器都会这样做)。
<div id="newCommentForm">
<fieldset>
<div class="form-group">
<textarea rows="2" id="newComment" placeholder="comment" class ="form-control" style="width: 520px;"></textarea>
</div>
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
<!-- ADD AN ID TO THIS BUTTON -->
<input type="submit" value="Comment" id="mySubmitButton" class="btn btn-info" />
</fieldset>
</div>
然后,您需要更新代码以绑定到按钮的click
事件。
// 1. First is this $(document).ready() shorthand
$(function() {
// 2. Add a click handler to the button, it will be called when clicked
$('#mySubmitButton').on('click', function(e) {
// 3. Prevent default behavior of submit button
e.preventDefault();
// Prepare your variables
var postId = 0; // Post id?
// 4. Fire the ajax call
$.ajax({
url : "/MAKE/SURE/THIS/IS/A/VALID/URL",
type : "post",
data : {
"postId" : postId,
"newComment" : $("#newComment").val()
},
success : function(data) {
console.log(data);
//location.reload(); // Comment this out first to see if it works
},
error : function() {
console.log("There was an error");
}
});
});
});
我在找Plunker模拟服务器响应的方式,稍后再进行更新。
原始
您的代码,只要它是准备发射Ajax调用。包装在$(function(){})
中的代码将在页面准备就绪时执行,这就是为什么自动触发ajax调用的原因。
另外,页面将在ajax调用完成时刷新($location.reload
在success
回调)。
要使用提交按钮进行表单提交,您需要绑定到其单击事件。
我现在打电话,稍后会更新示例。
我认为我理解我的问题,现在我有问题提交表单提交按钮我将其更改为'$(“#submit”)。click(function()'和我也在提交输入中加入了一个'id =“submit”,但是当我点击提交按钮时,什么也没有发生,所以如果你有时间的话,一个例子会非常有帮助 – dochsner
@dochsner我加了上面的例子,'ajaxSend '省略了,所以不会太长,你可以在'$($(function(){})'前面添加它们。ajax()' – PSWai
所以你对字段集合是正确的,这是一个问题,现在我得到“请求方法POST不支持,但这可能是一个完全不同的问题,所以我会检查我的代码,看看什么我可以找到 – dochsner
我完全复制了代码,现在甚至没有尝试提交,甚至没有在控制台上显示“有错误”。 – dochsner
您是否将网址调整为正确的值,并确保该按钮的ID是正确的。 –
是啊,我所做的只是复制和粘贴你的代码,即使URL不正确,是否至少会给我一个错误? – dochsner