您的位置：首页 > Web前端 > JavaScript

ajax提交表单插件 ajaxform.js

2018-03-10 23:06 369 查看

因为做后台页面的时候，很多交互都是使用的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" />

<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>


<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>

<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>

<input onclick="send_form_ele('#form1')" type="button" value="提交表单" /> <p></p>
<input onclick="send_form_ele('#form1',{otherdata:'额外参数'})" type="button" value="提交增加额外参数" /> <p></p>

<input onclick="send_form_ele('#form1',null,'test2.php')" type="button" value="更改提交地址为test2.php" /><p></p>
<input onclick="send_form_ele('#form1',null,null,'get')" type="button" value="更改提交方式为get" /><p></p>
</form>


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


<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>

<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>

<input onclick="send_form_ele('#form2')" type="button" value="提交表单" /> <p></p><p></p>
<input onclick="send_form_ele('#form2',{otherdata:'额外参数'})" type="button" value="提交增加额外参数" /> <p></p>

<input onclick="send_form_ele('#form2',null,'test2.php')" type="button" value="更改提交地址为test2.php" /><p></p><p></p>
<input onclick="send_form_ele('#form2',null,null,'get')" type="button" value="更改提交方式为get" /><p></p><p></p>
</div>



<h3>示例3</h3><p></p>
<input onclick="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>

</body>
</html>
test.php文件如下：<?php
if($_POST){
echo json_encode($_POST);
exit;
}

if($_GET){
echo json_encode($_GET);
exit;
}
?>test2.php就不在这里贴了
如果有任何想法或建议请在下面留言。祝大家工作顺心。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航