<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script type="text/javascript">

window.onload=function()

{

    var fm=document.getElementsByTagName("form")[0];

    fm.onsubmit=function()

    {

    //var username=document.getElementById("username").value;

    // var password=document.getElementById("password").value;

    // var email=document.getElementById("email").value;

    //var fmdata="username="+username+"&password="+password+"&email="+email;

    var fmdata=new FormData(fm);

        var xhr=new XMLHttpRequest();

        xhr.onreadystatechange=function()

        {

            if(xhr.readyState==4)

            {

                alert(xhr.responseText);

            }

        }

        xhr.open("POST","/1.php");

         //使用formData不用设置表头

         //xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

          xhr.send(fmdata);

        return false;

    }

}

</script>

</head>

<body>

ajax+FormData+javascript 实现无刷新表单注册

<form method="post">

姓名<input name="username" type="text" id="username">

<br>

密码<input name="password" type="password" id="password">

<br>

邮箱<input name="email" type="text" id="email">

<br>

<input type="submit" value="提交"></form>

</body>

</html>

ajax+FormData+javascript 实现无刷新表单注册的更多相关文章

  1. ajax+FormData+javascript实现无刷新表单信息提交

    ajax+FormData+javascript实现无刷新表单信息提交 原理: dom收集表单信息,利用FormData快速收集表单信息  ,实例化表单数据对象 同时收集fm的表单域信息. var f ...

  2. ajax+FormData+javascript 实现无刷新上传附件

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. DWZ框架Ajax无刷新表单提交处理流程

    DWZ框架Ajax无刷新表单提交处理流程是: 1.       ajax表单提交给服务器 2.       服务器返回一个固定格式json结构 3.       js会调函数根据这个json数据做相应 ...

  4. Ajax 使用formdata 实现 无刷新表单上传

    FormData对象的作用就类似于这里的serialize()方法,不过FormData是浏览器原生的,且支持二进制文件 1.这里实现一个无刷新上传图片,成功后页面显示 点击button 触发隐藏的 ...

  5. js实现无刷新表单提交文件，将ajax请求转换为form请求方法

    最近在做项目的时候遇到一个需要上传文件的需求,因为ajax请求是无法上传二进制文件流的,所以只能用form表单提交,而form提交有一个问题就是会使页面刷新,本文解决了form表单提交文件时页面刷新的 ...

  6. 话说Form标签的target属性-----无刷新表单提交

    国庆前(2013)无聊,就在铁道部的12306上“逛”了下下. PS:原来之所以叫12306,是因为其客服号码是12306,好吧,我很无知…… 首先是被“逛”的页面:票价查询. 之所以去逛,是因为一直 ...

  7. 基于jQuery的ajax系列之用FormData实现页面无刷新上传

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...

  8. 使用ajax和history.pushState无刷新改变页面URL onpopstate（转）

    Javascript代码 var htmlData1 = $.ajax(    {    url: "/getXXXResponse",    async: false }).re ...

  9. Javascript中的Form表单知识点总结

    Javascript中的Form表单知识点总结 在HTML中,表单是由form元素来表示的,但是在javascript中,表单则由HTMLFormElement类型,此元素继承了HTMLElement ...

随机推荐

  1. Java对象引用

    1．对象的强.软.弱和虚引用 在JDK 1.2以前的版本中,若一个对象不被任何变量引用,那么程序就无法再使用这个对象.也就是说,只有对象处于可触及(reachable)状态,程序才能使用它.从JDK ...

  2. java中dynamic web project与web project 的区别 [转]

    原帖地址:http://blog.sina.com.cn/s/blog_46726d2401013jlk.html 文章框架: 1.Dynamic  Web Project 概念 2.eclipse ...

  3. onCreateOptionsMenu与onCreateContextMenu差别

    onCreateOptionsMenu只会在启动时调用一次,而onCreateContextMenu则每次都会调用,这是因为onCreateContextMenu需要为所有的View控件的上下文菜单服 ...

  4. Ftp的断点下载实现

    思路:首先获取本地临时文件的大小,在通过FTp的REST命令获取远程文件的偏移,然后再RETR命令在偏移处下载.while循环对比本地文件和远程文件的字节大小,如此 不断的反复以上过程,直到远程文件字 ...

  5. UVA11388 GCD LCM(数论)

    题目链接. 题意: 给定两个数,一个G,一个L,找出两个数a,b(a<=b),使得这两个数的最大公约数为G,最小公倍数为L,且(a最小). 分析: 当a,b存在时,a一定为G. 自己证了一下,数 ...

  6. -_-#【Mac】快捷操作

    快捷键 command + 拖拽 ＝ 剪切option + 拖拽 ＝ 复制command + option + 拖拽 ＝ 快捷方式 command + ］ 前进command + ［ 后退 comma ...

  7. 【转】 Ubuntu samba服务器搭建及测试--不错

    原文网址:http://blog.csdn.net/longfeey/article/details/5937968 Ubuntu samba服务配置是很不错的文件应用很有学习价值, 这里我主要讲解U ...

  8. C#之VS2010开发Web Service

    一:创建web service vs2010软件默认的framework是4.0版本,所以想创建web服务的时候压根看不到web服务应用程序.网上有人说vs2010的web service 跟wcf合 ...

  9. LINQ to SQLite完美解决方案

    1.下载安装LinqConnectExpress(就是LinqConnect免费版) 2.安装好后就和LINQ TO  SQL 一样了! 3.查询(增删改查和LINQ TO SQL 完全一样,你可以不 ...

  10. Android Studio 2.1.x 关联SDK API Source

    问题: 看图=>,当在android studio里ctrl+鼠标左键查看例如: TextUtils.isEmpty(content);这段代码的isEmpty方法的实现的时候经常就跑到如图所示 ...