Ajax+FormData+javascript实现无刷新表单信息提交


Posted in Javascript onOctober 24, 2016

原理:

dom收集表单信息,利用FormData快速收集表单信息 ,实例化表单数据对象 同时收集fm的表单域信息。

var fd = new FormData(fm); //实例化对象

alert(fd);

fd对象内部有收集的form表单域信息

ajax传递表单信息

1.静态显示页面代码

<!DOCTYPE html >
<html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onload = function(){
var fm = document.getElementsByTagName('form')[0];
fm.onsubmit = function(){
//利用FormData实现form表单信息收集
var fd = new FormData(fm);
//fd 内部会把普通表单域 和 上传文件域 的信息都收集
//ajax传递表单信息
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
alert(xhr.responseText);
}
}
//设置监听事件ajax.upload.onprogress
xhr.upload.onprogress = function(evt){
//感知附件上传情况,利用事件对象感知
var loaded = evt.loaded;
var total = evt.total;
var per = Math.floor((loaded/total)*100)+"%";
document.getElementById('son').innerHTML = per;
document.getElementById('son').style.width = per;
}
xhr.open('post','./05.php');
xhr.send(fd);
return false;//组织浏览器提交
}
}
</script>
<style type="text/css">
#pat {width:430px;height:40px; border:5px solid blue;}
#son {width:0;height:100%; background-color:lightblue;}
</style>
</head>
<body>
<h2>ajax+FormData实现 无刷新文件上传</h2>
<form method="post" action="" >
<p>用户名:<input type="text" name="username" /></p>
<p>密码:<input type="password" name="password" /></p>
<p>邮箱:<input type="text" name="email" /></p>
<div id="pat"><div id="son"></div></div>
<p>头像:<input type="file" name="user_pic" /></p>
<p><input type="submit" value="注册" /></p>
</form>
</body>
</html>

2.php页面代码

服务器保存附件名字为本身名字

本地文件------>上传(php程序处理)------>服务器

本地文件名字的 字符集 gb2312

php程序的 字符集 utf-8--->gb2312 (在程序里边把utf-8编码的附件名字 转码为 gb2312)服务器的 字符集 gb2312

<?php
//$_FILES['user_pic']['error']
//0->ok 1->大小超过php.ini限制 2->大小超过MAX_FILE_SIZE限制 
//3->附件只上传了一部分(不完整) 4->没有上传附件
if($_FILES['user_pic']['error']>0){
exit('上传附件有问题,有可能没有附件');
}
//服务器保存附件名字为本身名字
//本地文件------>上传(php程序处理)------>服务器
//本地文件名字的 字符集 gb2312
//php程序的 字符集 utf-8--->gb2312
// (在程序里边把utf-8编码的附件名字 转码为 gb2312)
//服务器的 字符集 gb2312
$name = $_FILES['user_pic']['name'];
$name = iconv('UTF-8','GB2312',$name); //$name的编码由utf-8---变为--->gb2312
$path = "./upload/";
//附件上传逻辑
//move_uploaded_file(临时路径名,真实路径名);
if(move_uploaded_file($_FILES['user_pic']['tmp_name'],$path.$name))
echo "success";
else
echo "fail";

下面看下jQuery 将form表单通过ajax实现无刷新提交的实例代码。

代码如下所示:

//将form转换为AJAX提交
  function ajaxSubmit(url,frm,fn){
    var dataPara=getFormJson(frm);
    $.ajax({
      url:url,
      type:"post",
      data:dataPara,
      async:false,
      dataType:'txt',
      success:fn
    });
  }
  //将form中的值转换为键值对
  function getFormJson(frm){
    var o={};
    var a=$(frm).serializeArray();
    $.each(a,function(){
      if(o[this.name]!==undefined){
        if(!o[this.name].push){
          o[this.name]=[o[this.name]];
        }
        o[this.name].push(this.value || '');
      }else{
        o[this.name]=this.value || '';
      }
    });
    return o;
  }
/*
  //前台调用方式
  function autoSubmitFun(){
     ajaxSubmit("autoSumitScoreAJAX.action",$('#formId'),function(){});
  }
*/

以上所述是小编给大家介绍的Ajax+FormData+javascript实现无刷新表单信息提交,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
Jul 08 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 Javascript
backbone简介_动力节点Java学院整理
Jul 14 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 #Javascript
express文件上传中间件Multer详解
Oct 24 #Javascript
用js实现博客打赏功能
Oct 24 #Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 #Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 #Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 #Javascript
在js中实现邮箱格式的验证方法(推荐)
Oct 24 #Javascript
You might like
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
php利用cookie实现访问次数统计代码
2011/05/19 PHP
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
PHP目录操作实例总结
2016/09/27 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
Python struct模块解析
2014/06/12 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
七年级政治教学反思
2014/02/03 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
2014年校长工作总结
2014/12/11 职场文书
我的长征观后感
2015/06/09 职场文书
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技
Golang 结构体数据集合
2022/04/22 Golang
mysql 获取相邻数据项
2022/05/11 MySQL