无刷新表单信息提交

发布时间：3年前作者：老郭热度： 1558 ℃评论数：

# 无刷新表单信息提交

> 利用新技术FormData 表单数据对象，可以实现快速收集表单信息。
FormData是html5的新技术，在主流浏览器都可以正常使用。

------------

> 利用FormData实现快速收集表单信息：

```javascript
<script type="text/javascript">
window.onload = function(){
//给form表单制作一个提交时间onsubmit
    var fm = document.getElementsByTagName('form')[0];
    fm.onsubmit = function(){
        //1、利用FormData表单数据对象快速收集表单信息
        //Form 使用注意：1、要求表单中必须加入name值
        //2、不能设置setRequerHeader头
        //3.特殊符号无需编码
        var fd = new FormData(fm);
        //4、ajax负责把收集好的信息传递给服务器
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
                if (xhr.readyState==4) {
                    alert(xhr.responseText);
                }
        }
        xhr.open('post','./05.php');
        //xhr.setRequestHeader("content-type","application/x-www/form-urlencoded");
        xhr.send(fd);
        //组织浏览器默认动作
        evt.preventDefault();//事件对象阻止
        // return false;
    }
}
</script>
```

> 老技术收集表单信息：

```javascript
<script type="text/javascript">
window.onload = function(){
//给form表单制作一个提交时间onsubmit
    var fm = document.getElementsByTagName('form')[0];
    fm.onsubmit = function(){
        //1、收集表单信息
        var name = document.getElementsById('username').value;
        var pw = document.getElementsById('userpw').value;
        var em = document.getElementsById('useremail').value;
        var info = "name="+nm+"&pwd"+pw+"&email="+em;
        //2、ajax负责把收集好的信息传递给服务器
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
                if (xhr.readyState==4) {
                    alert(xhr.responseText);
                }
        }
        xhr.open('post','./05.php');
        xhr.setRequestHeader("content-type","application/x-www/form-urlencoded");
        xhr.send(fd);
        //组织浏览器默认动作
        evt.preventDefault();//事件对象阻止
        // return false;
    }
}
</script>
```

> 表单：

```html
<h2>无刷新方式上传附件（大附件进度条）</h2>
<form>
   <p>用户名：<input type="text" name="mingzi" id="username"></p>
    <p>密码：<input type="password" name="mima" id="userpw"></p>
 <p>邮箱：<input type="text" name="youxiang" id="useremail"></p>
  <p><input type="submit" name="注册"></p>
</form>
```

------------

### 使用FormData注意事项：
> 1、每个表单域必须有 name 属性
2、在form标签里边无需设置 enctype="multipart/form-data" 属性(即使没有上传文件域也不需要设置)
3、Ajax 通过 post 方式传递 FormData 的数据不需要设置 setRequestHeader() 方法
4、普通表单域的特殊符号无需编码

无刷新,表单,信息

上一篇：Json使用

下一篇：使用Ajax中$.post方法前台获取json数据，将数据转换为对象

栏目导航

Ajax是什么？ 1398 ℃
网站禁止浏览器缓存 1479 ℃
Ajax之get方式请求 2974 ℃
Ajax之post方式请求 2364 ℃
Json使用 1361 ℃
无刷新表单信息提交 1558 ℃
使用Ajax中$.post方法前台获取json数据，将数据转换为... 2019 ℃
细说jQuery的选择器 1539 ℃
jQuery的属性操作 2299 ℃
jQuery快捷操作 1450 ℃
jQuery对象与dom对象关系 3286 ℃
jQuery的事件加载机制 1779 ℃
jQuery属性选择器使用 2402 ℃
jQuery基本动画效果 2712 ℃
利用Ajax技术实现天气预报接口 1609 ℃

无刷新表单信息提交

栏目导航

相关文章

微信小程序

手机扫码访问