javascript：同时使用form表单还有ajax会怎么样？

于 2018-01-20 09:00:14 发布
阅读量2.3k 收藏 3
点赞数 1
分类专栏： javascript javascript 文章标签： http请求被cancel 表单 ajax 错误 http被cancel
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HUSHILIN001/article/details/79112055
版权

其实问题描述很简单，就是做一个form表单，然后再type=submit的地方绑定上一个onclick，然后会发生什么事？

直接上代码：

<form method="post" class="form-x" action="">
					<div class="form-group">
						<div class="label">
							<label>对应测试题ID：</label>
						</div>
						<div class="field">
							<input id="_n1" type="number" class="input w50" value="" name="title" data-validate="required:请输入对应的测试题的ID" />
							<div class="tips"></div>
						</div>
					</div>
					<div class="form-group">
						<div class="label">
							<label>图片：</label>
						</div>
						<div class="field">
							<input type="button" class="button bg-blue margin-left" id="image1" value="+ 浏览上传" style="float:left;">
							<input id="fid" type="file" class="button bg-blue margin-left" style="float:left; width: 102px;height:40px;opacity: 0;margin-left: -105px;">
							<div class="tipss">图片尺寸：1920*500</div>
						</div>
					</div>
					<div><img id="iid" /></div>
					<div class="form-group">
						<div class="label">
							<label>排序：</label>
						</div>
						<div class="field">
							<input id="_n2" type="text" placeholder="排序值越小越靠前" class="input w50" name="sort" value="0" data-validate="required:,number:排序必须为数字" />
							<div class="tips"></div>
						</div>
					</div>
					<div class="form-group">
						<div class="label">
							<label></label>
						</div>
						<div class="field">
							<button id="btn" class="button bg-main icon-check-square-o"> 提交</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<script>
			var imgs = []; //存储图片链接  
			//为文件上传添加change事件  
			var fileM = document.querySelector("#fid");
			$("#fid").on("change", function() {
				console.log(fileM.files);
				var fileObj = fileM.files[0];
				var formData = new FormData();
				formData.append('file', fileObj);
				var ajax = new XMLHttpRequest();
				ajax.open("POST", "http://xk-cms.test.xuguoliang.top/api/qiniu/one", true);
				ajax.send(formData);
				ajax.onreadystatechange = function() {
					if(ajax.readyState == 4) {
						if(ajax.status >= 200 && ajax.status < 300 || ajax.status == 304) {
							console.log("上传成功");
							var obj = JSON.parse(ajax.responseText);
							console.log(obj.fileURL);
							$("#iid")[0].src = obj.fileURL;
							$("#iid").css("width", "600px");
							$("#iid").css("height", "600px");

						}
					}
				}
			});
			$("#btn").bind("click", function() {

				var img = $('#iid')[0].src;
				var position = $("#_n2").val();
				var questionId = $("#_n1").val();
				var paraMap = {
					"img": img,
					"position": position,
					"questionId": questionId
				};
				//上传banner

				$.ajax({
					type: "POST",
					url: "http://xk-cms.test.xuguoliang.top/api/banner",
					timeout:3000,
					headers: {
						'Content-type': 'application/json;charset=UTF-8'
					},
					data: JSON.stringify(paraMap),
					//dataType:"JSON",
					//					data: {
					//						img: img,
					//						position: position,
					//						questionId: questionId
					//
					//					},
					success: function(sres) {
						console.log(sres);
					},
					fail: function(fres) {
						console.log(fres);
					}

				});

			});
很简单的一个请求，但是却又有点不同，因为这里有个表单，所以我们按下保存按钮试一下


canceled：啥意思？也就是说我们的ajax被取消了。为什么？这是因为我们后续又发了一个表单请求

是由于在提交时，form action与绑定于button上的click事件会同时触发。form action将表单内容以serach的形式追加至当前url上，url变更后会导致页面重新加载， 而这正是导致post请求在执行后就被终止的原因。

接着，你可能会绝得是我这边去做了其他的事情，那么让我们取消掉那个form

<body>

		<div class="panel admin-panel margin-top" id="add">
			<div class="panel-head"><strong><span class="icon-pencil-square-o"></span> 增加内容</strong></div>
			<div class="body-content">
				<!--<form method="post" class="form-x" action="">-->
					<div class="form-group">
						<div class="label">
							<label>对应测试题ID：</label>
						</div>
						<div class="field">
							<input id="_n1" type="number" class="input w50" value="" name="title" data-validate="required:请输入对应的测试题的ID" />
							<div class="tips"></div>
						</div>
					</div>
					<div class="form-group">
						<div class="label">
							<label>图片：</label>
						</div>
						<div class="field">
							<input type="button" class="button bg-blue margin-left" id="image1" value="+ 浏览上传" style="float:left;">
							<input id="fid" type="file" class="button bg-blue margin-left" style="float:left; width: 102px;height:40px;opacity: 0;margin-left: -105px;">
							<div class="tipss">图片尺寸：1920*500</div>
						</div>
					</div>
					<div><img id="iid" /></div>
					<div class="form-group">
						<div class="label">
							<label>排序：</label>
						</div>
						<div class="field">
							<input id="_n2" type="text" placeholder="排序值越小越靠前" class="input w50" name="sort" value="0" data-validate="required:,number:排序必须为数字" />
							<div class="tips"></div>
						</div>
					</div>
					<div class="form-group">
						<div class="label">
							<label></label>
						</div>
						<div class="field">
							<button id="btn" class="button bg-main icon-check-square-o"> 提交</button>
						</div>
					</div>
<!--				</form>
-->			</div>
		</div>
		<script>
			var imgs = []; //存储图片链接  
			//为文件上传添加change事件  
			var fileM = document.querySelector("#fid");
			$("#fid").on("change", function() {
				console.log(fileM.files);
				var fileObj = fileM.files[0];
				var formData = new FormData();
				formData.append('file', fileObj);
				var ajax = new XMLHttpRequest();
				ajax.open("POST", "http://xk-cms.test.xuguoliang.top/api/qiniu/one", true);
				ajax.send(formData);
				ajax.onreadystatechange = function() {
					if(ajax.readyState == 4) {
						if(ajax.status >= 200 && ajax.status < 300 || ajax.status == 304) {
							console.log("上传成功");
							var obj = JSON.parse(ajax.responseText);
							console.log(obj.fileURL);
							$("#iid")[0].src = obj.fileURL;
							$("#iid").css("width", "600px");
							$("#iid").css("height", "600px");

						}
					}
				}
			});
			$("#btn").bind("click", function() {

				var img = $('#iid')[0].src;
				var position = $("#_n2").val();
				var questionId = $("#_n1").val();
				var paraMap = {
					"img": img,
					"position": position,
					"questionId": questionId
				};
				//上传banner

				$.ajax({
					type: "POST",
					url: "http://xk-cms.test.xuguoliang.top/api/banner",
					timeout:3000,
					headers: {
						'Content-type': 'application/json;charset=UTF-8'
					},
					data: JSON.stringify(paraMap),
					//dataType:"JSON",
					//					data: {
					//						img: img,
					//						position: position,
					//						questionId: questionId
					//
					//					},
					success: function(sres) {
						console.log(sres);
					},
					fail: function(fres) {
						console.log(fres);
					}

				});

			});
		</script>
	</body>

最后的最后，当然是成功了，嘿嘿嘿



参考资料：参考资料1

mkmin
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值