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 相关文章推荐
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
jquery选择器的选择使用及性能介绍
Jan 16 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
JS折半插入排序算法实例
Dec 02 Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
js单页hash路由原理与应用实战详解
Aug 14 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
JS中Map和ForEach的区别
Feb 05 Javascript
vue实现拖拽进度条
Mar 01 Vue.js
利用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
PHP 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
PHP无敌近乎加密方式!
2010/07/17 PHP
php数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
Python实现查找系统盘中需要找的字符
2015/07/14 Python
Python简明入门教程
2015/08/04 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
python空元组在all中返回结果详解
2020/12/15 Python
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
Aosom西班牙:家具在线商店
2020/06/11 全球购物
群众路线教育党课主持词
2014/04/01 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
《法国号》教学反思
2016/02/22 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
springBoot基于webSocket实现扫码登录
2021/06/22 Java/Android