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

原理：

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

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

alert(fd);

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

ajax传递表单信息

1.静态显示页面代码

 





ajax+FormData实现 无刷新文件上传

用户名：
密码：
邮箱：

头像：

2.php页面代码

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

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

本地文件名字的 字符集 gb2312

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

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实现无刷新表单信息提交，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！