javascript：在form表单中添加ajax方法

最新推荐文章于 2024-04-23 10:57:24 发布
最新推荐文章于 2024-04-23 10:57:24 发布
阅读量654 收藏 3
点赞数

在做一个用户登陆页面的时候，在form表单中加了ajax请求，并且添加了“type = submit”，再提交的时候，通过调试发现代码在跑的过程中直接跳过了ajax请求。

举个例子：

<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请求在执行后就被终止的原因。
也可以通过调试，可以观察到代码跑的过程中直接跳过了ajax。
在这里插入图片描述
接着将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>

接着就成功了：
在这里插入图片描述

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

转载：https://blog.csdn.net/HUSHILIN001/article/details/79112055

乔尼娜沙德星
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript ajax 系列二 form表单；通过Ajax提交获取表单数据；模板引擎art-template的用法；以及实现原理
m0_55170432的博客
04-09 459
1.0 form表单 表单在网页中主要负责数据采集功能。HTML中的标签，就是用于采集用户输入的信息，并通过标签的提交操作，把采集到的信息提交到服务器端进行处理。 1.1 form表单标签的属性 form标签用来采集数据，form标签的属性则是用来规定如何把采集到的数据发送到服务器。 1. action(值是url地址，规定提交表单时向何处发送表单数据) 当 表单在未指定 action 属性值的情况下，action 的默认值为当前页面的 URL 地址。 **注意：**当提交表单后，页面会立即跳转到 act
Ajax-Contact-Form：用HTML5表单验证和纯JavaScript用PHP开发的简单Ajax Contact表单
01-29
用PHP开发的具有HTML5表单验证和纯JavaScript的简单Ajax联系人表单。 下载 您可以在下载最新版本或所有发行版本。 要求 PHP> = 5.3 如何使用？ 打开config.php 文件，并填写您的信息。 <?php return [ '...
js实现ajax请求
weixin_30385925的博客
10-25 75
练下手，好久没写ajax var xmlhttp=null;//创建XMLHttprequest function createXMLHttpRequest(){ if(window.ActiveXObject){ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); ...
将form表单提交文件修改为ajax提交
最新发布
Fred He的博客
04-23 3185
好久没有记录工作中的出现的问题了，不过最近客户提出了新的需求，正好弥补了一下我的短板，学到了新的知识。 周一接到客户电话，要求完善上周写的某个功能--就是同时上传多个图片，并通过接口程序传到第三方系统。上周的修改由于是同事告诉我的需求，并不是很明确，所以需要重新修改一下。 客户提的需求是，将原来后台生成的文件直接传到第三方的功能修改为页面上传文件（图片或PDF），所以需要修改的地方比较多；例如，将原来后台生成PDF的功能代码去掉，在页面添加上传文件的代码，js 中增加上传文件的判断等等。今天主要说的就是
使用ajax方法实现form表单的提交
IT1995的博客
02-09 5107
注：转载的原文地址：https://www.cnblogs.com/han-1034683568/p/7199168.html使用ajax方法实现form表单的提交作者：13GitHub：https://github.com/ZHENFENG13版权声明：本文为原创文章，未经允许不得转载。写在前面的话在使用form表单的时候,一旦点击提交触发submit事件，一般会使得页面跳转，页面间的跳转等行为...
JS中ajax请求提交form表单
weixin_33858485的博客
01-15 1541
2019独角兽企业重金招聘Python工程师标准>>> ...
js将form表单提交数据封装为ajax提交
TimeTDIT的博客
10-09 7856
将form表单数据提交方式修改为ajax
Vue form 表单提交+ajax异步请求+分页效果
08-30
在本篇文章中，我们将详细介绍 Vue 表单提交、Ajax 异步请求和分页效果的实现方法。这些技术是 Web 开发中常用的技术，能够提高用户体验和网站性能。 一、Vue 表单提交 Vue 表单提交是指在Vue框架下实现的表单提交...
Rails-4-AJAX-Form：Rails 4 AJAX表单示例
02-01
在Ruby on Rails框架中，AJAX（异步JavaScript和XML）技术被广泛用于构建动态、交互性强的Web应用。Rails 4引入了更多的改进，使得AJAX集成更加平滑，提高了用户体验，减少了页面刷新的需求。在本文中，我们将深入...
JavaScript中Form表单技术汇总(推荐)
01-19
本人也还在学习中。 表单验证1-简单验证 进行简单的验证，用户名必须为abcd，密码长度必须大于等于6 然后根据用户输入的数据，在后面给出提示。 代码演示： <html> <head> <title>DHTML技术演示...
ajaxform:简单的ajax提交表单插件
05-20
ajaxform 一个简单的ajax提交插件#### ajaxSubmit（options，callback） 通过Jquery AJAX提交表单。 网址，方法，数据等。来自表格的参数。 // bind submit to form$ ( 'form' ) . on ( 'submit' , function ( e ) {...
Ajax-FormJS.zip
09-17
Ajax-FormJS.zip,使用反馈系统通过ajax请求发送html表单的jquery插件,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在不重新加载网页的情况下更改。
form表单的标签属性以及通过Ajax提交表单数据
背心的博客
10-18 643
form表单的标签属性以及通过Ajax提交表单数据
form表单加js或ajax验证
ling811的专栏
06-16 1629
学习笔记今天要给表单提交添加错误提示，当每天提交够五次的时候，给出提示不让提交，为了提示找到一个办法。这样可以提示错误后防止表单提交代码：原代码form提交，button 的 type 属性为submit type="submit" id="qa_add" >提交   我把 submit 修改成 button type="button" id="qa_add" >提交 然后这样就可以了
form表单改为AJAX提交
yangzhihong650的博客
04-02 1629
一、form表单改成AJAX提交 原来的form格式 <form action="xxx" method="get"> //action的值是请求的url地址 <div class="form-group"> <label for="name">姓名</label> <input type="t...
ajax提交表单插件 ajaxform.js
qq122453418的博客
03-10 860
因为做后台页面的时候，很多交互都是使用的ajax。为了方便和提高工作效率，自己写了一个ajax提交插件。因为该插件使用的是jquery语法，所以需要引入jquery.js。下载地址 https://download.csdn.net/download/qq122453418/10279546插件有一个小bug，解决如下：打开 ajaxform.js文件找到下面代码：if(otherdata){ ...
原生js使用ajax请求,form表单提交文件
Tokisaki_Kurumi的博客
04-26 1728
get请求 let xhr = new XMLHttpRequest(); //构造函数没有参数的情况,括号可以省略 xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks') //open函数，指定请求方式和URL地址，如果请求方式是get,传递参数需要把参数列表用?拼接到url地址后面 xhr.send()//send函数，发起Ajax请求，get方法可以写null也可以省略 xhr.onreadystatechange = f
ajax提交form表单javascript,jquery实现ajax提交form表单的方法总结
weixin_32821257的博客
08-05 248
方法一：. 代码如下:function addhandlingfeetorefund(){var ajaxurl= "../ordermanagement/ajaxmodifyorderservice.x";alert($('#formaddhandlingfee').serialize());$.ajax({type: "post",datatype: "html",url: ajaxurl +...
form ajax post请求的个人见解
廖__的博客
02-14 342
最近在写用form的ajax进行发送post请求时，总是弄得不是很清楚。后面看了一些文章，大概有些思绪，现在总结一下。不知道我想的对不对，如有错误请提出来，谢谢。 form通过ajax来发送post请求分两种情况： ①发送按钮的type为button类型，这种就比较简单。直接点击button，然后js中写button的click点击事件，或者在button中写onclick取调用js中的方法。jq...
通过ajax提交form表单中的按钮
05-23
可以使用jQuery的ajax方法来提交form表单中的按钮。首先，需要在form标签中添加一个id属性，以便于在jQuery中选取该表单。然后，在按钮的click事件中，使用ajax方法向服务器发送表单数据。 以下是一个示例代码： HTML部分： ```html <form id="myForm" action="submit.php" method="post"> <input type="text" name="name"> <input type="email" name="email"> <button type="submit" name="submitBtn" id="submitBtn">提交</button> </form> ``` jQuery部分： ```javascript $(document).ready(function() { $('#submitBtn').click(function(event) { event.preventDefault(); // 阻止默认提交事件 var formData = $('#myForm').serialize(); // 获取表单数据 $.ajax({ url: $('#myForm').attr('action'), type: 'POST', data: formData, success: function(response) { // 处理服务器响应 }, error: function() { // 处理错误 } }); }); }); ``` 在上面的代码中，我们使用了preventDefault()方法来阻止按钮的默认提交事件。然后，使用serialize()方法获取表单数据，并使用ajax方法将数据发送到服务器。在success回调函数中，我们可以处理服务器响应，而在error回调函数中，我们可以处理错误情况。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值