ajax提交表单插件 ajaxform.js

最新推荐文章于 2023-07-20 14:24:18 发布

songfuwang

最新推荐文章于 2023-07-20 14:24:18 发布

阅读量860

点赞数

分类专栏：前端框架文章标签： ajax提交表单异步提交异步提交表单 ajax提交 ajax插件

本文链接：https://blog.csdn.net/qq122453418/article/details/79511164

版权

前端框架专栏收录该内容

4 篇文章 0 订阅

订阅专栏

因为做后台页面的时候，很多交互都是使用的ajax。为了方便和提高工作效率，自己写了一个ajax提交插件。因为该插件使用的是jquery语法，所以需要引入jquery.js。

下载地址 https://download.csdn.net/download/qq122453418/10279546

插件有一个小bug，解决如下：

打开 ajaxform.js文件

找到下面代码：

if(otherdata){
	this.add_data(otherdata);
}

将其剪切放到下面代码的后面即可：

if(eleid)
{
	this.setele(eleid);
}

修改完成后如下所示：

	if(eleid)
	{
		this.setele(eleid);
	}
	if(otherdata){
		this.add_data(otherdata);
	}

下面通过例子来详细说下使用：

html文件如下:

<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<!-- 引入jquery 和ajaxform -->
	<script src="jquery.js"></script>
	<script src="ajaxform.js"></script>
</head>
<body>
<script>
/**
* 为了方便， 我将封装了一个 ajax 提交表单的函数
* @param ele 要提交表单的选择器
* @param otherdata 其他参数  示例{a:123,b:'bbbbbb'}
*/
function send_form_ele(ele,otherdata,url,type){
	var obj = new AJAXForm(ele,otherdata); //创建一个对象
	obj.dataType = 'json'; //设置值同$.ajax中的dataType参数
	obj.success = function(res){ //成功后执行的函数，res为成功后的返回值
		console.log(res); //在控制台打印返回结果
	}
	obj.error = function(a){//失败后执行的函数
		console.log(a);
	}
	obj.complete = function(){//请求交互完成执行（无论 成功或失败 都会执行）
		console.log('请求交互结束');
	}
	obj.send(url,type);//提交表单，如果这里给了url,则提交到该地址；如果这里给了提交方式,则使用该方式（get 或 post）
}
</script>

<!-- 示例1 -->
<h3>示例1</h3>
<form method="post" action="test.php" enctype="multipart/form-data" id="form1">
	<input type="text" name="text" value="aaa" /> 
	<p></p> <p></p>
	
	复选项
	<input type="checkbox" name="checkbox[]" value="b1" />
	<input type="checkbox" name="checkbox[]" value="b2" />
	<input type="checkbox" name="checkbox[]" value="b3" /><p></p>
	
	单选项
	<input type="radio" name="radio" value="c1" />
	<input type="radio" name="radio" value="c2" /> <p></p>
	<!-- 当上传文件时需要注意：上传文件是将文件转成base64格式提交 -->
	<input type="file" name="myfile" /> <p></p>
	下拉框 <select name="select">
		<option value="111">111</option>
		<option value="222">222</option>
		<option value="333">333</option>
	</select>
	<p></p>
	<!-- 通过onclick 出发 send_form_ele函数 提交表单-->
	<input οnclick="send_form_ele('#form1')" type="button" value="提交表单" /> <p></p>
	<input οnclick="send_form_ele('#form1',{otherdata:'额外参数'})" type="button" value="提交增加额外参数" /> <p></p>
	
	<input οnclick="send_form_ele('#form1',null,'test2.php')" type="button" value="更改提交地址为test2.php" /><p></p>
	<input οnclick="send_form_ele('#form1',null,null,'get')" type="button" value="更改提交方式为get" /><p></p>
</form>
<!-- 示例1 end -->

<p></p><p></p><p></p>

<!-- 示例2 提交某标签中的input表单-->
<h3>示例2</h3><p></p>
<div method="post" action="test.php" enctype="multipart/form-data" id="form2">
	<input type="text" name="text" value="aaa" /> <p></p><p></p>
	
	复选项
	<input type="checkbox" name="checkbox[]" value="b1" />
	<input type="checkbox" name="checkbox[]" value="b2" />
	<input type="checkbox" name="checkbox[]" value="b3" /><p></p><p></p>
	
	单选项
	<input type="radio" name="radio" value="c1" />
	<input type="radio" name="radio" value="c2" /><p></p><p></p>
	<!-- 当上传文件时需要注意：上传文件是将文件转成base64格式提交 -->
	<input type="file" name="myfile" /><p></p><p></p>
	下拉框 <select name="select">
		<option value="111">111</option>
		<option value="222">222</option>
		<option value="333">333</option>
	</select>
	<p></p>
	<!-- 通过onclick 出发 send_form_ele函数 提交表单-->
	<input οnclick="send_form_ele('#form2')" type="button" value="提交表单" /> <p></p><p></p>
	<input οnclick="send_form_ele('#form2',{otherdata:'额外参数'})" type="button" value="提交增加额外参数" /> <p></p>
	
	<input οnclick="send_form_ele('#form2',null,'test2.php')" type="button" value="更改提交地址为test2.php" /><p></p><p></p>
	<input οnclick="send_form_ele('#form2',null,null,'get')" type="button" value="更改提交方式为get" /><p></p><p></p>
</div>
<!-- 示例2 end -->

<!-- 示例3 直接通过设置参数进行ajax提交 -->
<h3>示例3</h3><p></p>
<input οnclick="ob.send()" type="button" value="提交示例3" />
<script>

	var ob = new AJAXForm();
	ob.data = {a:'a',b:123,c:['a','b','c']}; //设置提交参数
	ob.add_data({d:'a',e:123,f:['a','b','c']}); //通过方法设置提交参数(通过该方法增加提交参数)
	ob.type = 'get'; //设置提交方式为get
	ob.url = 'test.php'; //设置提交地址
	ob.dataType = 'json'; //设置dataType 为json 格式
	ob.enctype = 'multipart/form-data'; //设置form表单的 enctype
	ob.success = function(res){ //请求成功后执行
		console.log(res);
	}
	ob.error = function(e){ //请求出错后执行
		console.log(e);
	}
	ob.complete = function(){ //无论成功或失败都会执行
		console.log('请求完成');
	}
	//通过 ob.send() 进行提交即可，请点击 示例3 下面的按钮
</script>
<!-- 示例3 end -->
</body>
</html>

test.php文件如下：

<?php
if($_POST){
	echo json_encode($_POST);
	exit;
}

if($_GET){
	echo json_encode($_GET);
	exit;
}
?>

test2.php就不在这里贴了

如果有任何想法或建议请在下面留言。祝大家工作顺心。

songfuwang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax提交表单插件 ajaxform.js

因为做后台页面的时候，很多交互都是使用的ajax。为了方便和提高工作效率，自己写了一个ajax提交插件。因为该插件使用的是jquery语法，所以需要引入jquery.js。下载地址 https://download.csdn.net/download/qq122453418/10279546插件有一个小bug，解决如下：打开 ajaxform.js文件找到下面代码：if(otherdata){ ...
复制链接

扫一扫