使用异步请求提交会刷新两次原因

最新推荐文章于 2023-03-23 16:11:13 发布

ljf8838

最新推荐文章于 2023-03-23 16:11:13 发布

阅读量626

点赞数 1

分类专栏： exception web 文章标签： ajax 发送两次请求

本文链接：https://blog.csdn.net/ljf12138/article/details/103630140

版权

exception 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

web

18 篇文章 0 订阅

订阅专栏

为么会提交两次？
按钮在表单中，按钮的type是submit，这时如果你使用了异步请求，它会先执行异步请求，在执行一遍传统方式请求：提交form表单的方式。
最后结果肯定就是第二次提交显示的东西了

	<script type="text/javascript">
	$(function(){
		//为保存按钮绑定事件，执行市场活动的添加操作
		$("#saveActivityBtn").click(function () {
			$.ajax({
				url : "workbench/activity/saveActivity.do",
				data : {
					"owner" : $.trim($("#create-owner").val()),
					"name" : $.trim($("#create-name").val()),
					"startDate" : $.trim($("#create-startDate").val()),
					"endDate" : $.trim($("#create-endDate").val()),
					"cost" : $.trim($("#create-cost").val()),
					"description" : $.trim($("#create-description").val())

				},
				type : "post",
				dataType : "json",
				success : function (data) {
					if(data.success){
						//刷新列表
						pageList(1,$("#activityPage").bs_pagination('getOption', 'rowsPerPage'));
						//关闭模态窗口
						$("#createActivityModal").modal("hide");
					}else{
						alert("添加市场活动失败");
					}
				}
			})
		})
	}
</script>
<body>
	<!-- 创建市场活动的模态窗口 -->
	<div class="modal fade" id="createActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel1">创建市场活动123</h4>
				</div>
				<div class="modal-body">
					<form id="activitySaveForm" class="form-horizontal" role="form">
						<div class="form-group">
							<label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-owner">
								
								</select>
							</div>
                            <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-name">
                            </div>
						</div>
						<div class="form-group">
							<label for="create-startTime" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="create-startDate">
							</div>
							<label for="create-endTime" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="create-endDate">
							</div>
						</div>
                        <div class="form-group">
                            <label for="create-cost" class="col-sm-2 control-label">成本</label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-cost">
                            </div>
                        </div>
						<div class="form-group">
							<label for="create-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="create-description"></textarea>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="submit" class="btn btn-primary" id="saveActivityBtn">保存</button>
				</div>
			</div>
		</div>
	</div>
</body>

上面保存按钮type是submit，按传统方式提交，虽然不在form表单内部，但是会执行提交刷新页面，修改成button普通按钮。

<button type="button" class="btn btn-primary" id="saveActivityBtn">保存</button>

ljf8838

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用异步请求提交会刷新两次原因

为么会提交两次？按钮在表单中，按钮的type是submit，这时如果你使用了异步请求，它会先执行异步请求，在执行一遍传统方式请求：提交form表单的方式。最后结果肯定就是第二次提交显示的东西了 <script type="text/javascript"> $(function(){ //为保存按钮绑定事件，执行市场活动的添加操作 $("#saveActivityBtn...
复制链接

扫一扫