千家信息网

如何解决按钮触发Ajax请求时一次点击两次提交的问题

发表于:2024-11-19 作者:千家信息网编辑
千家信息网最后更新 2024年11月19日,这篇文章主要介绍了如何解决按钮触发Ajax请求时一次点击两次提交的问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。页面中的按钮的ty
千家信息网最后更新 2024年11月19日如何解决按钮触发Ajax请求时一次点击两次提交的问题

这篇文章主要介绍了如何解决按钮触发Ajax请求时一次点击两次提交的问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

页面中的按钮的type是submit的:

ajax的请求,在JQuery中是:

$(function () {$('#submit').click(function () {var createGenreForm = $('#createGenreForm');if (createGenreForm.valid()) {var obj = {Name: $('#Name').val(),Description: $('#Description').val()};var jsonSerialized = JSON.stringify(obj);$.ajax({type: "POST",url: createGenreForm.attr('action'),dataType: "json",contentType: "application/json; charset=utf-8",data: jsonSerialized,success: function (result) {alert(result.Message);},error: function (error) {alert("There was an error posting the data to the server: " + error.responseText);}});}});});

发生两次提交的原因是在执行完ajax请求后,并没有阻止submit的行为,所以解决方法有两种:

1、不使用type为submit类型的按钮,而是使用type是button的按钮。

2、在$('#submit').click函数中,最后加一行return false;,即可阻止submit。

感谢你能够认真阅读完这篇文章,希望小编分享的"如何解决按钮触发Ajax请求时一次点击两次提交的问题"这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!

0