这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
在前端开发中 ajax,formdata 和 js 实现无刷新表单信息提交非常棒,接下来通过本文给大家介绍 Ajax+FormData+javascript 实现无刷新表单信息提交的相关资料, 需要的朋友可以参考下
原理:
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 实现无刷新表单信息提交,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0516/330959.html