<!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. KeyPress事件

    在做一个小demo的时候,发现在文本框中输入一个数字,按下“+”,数字增加了,但是“+”仍旧存在的问题,解决方案:提前执行键盘press事件 private void txtNum_KeyPress( ...

  2. Java中堆内存（heap）和栈内存（stack）的区别

    在Java代码中,常常会使用到这样的类的声明实例化: Person per = new Person(); //这其实是包含了两个步骤,声明和实例化 Person per = null; //声明一个 ...

  3. <frameset><frame><iframe>网页框架

    这几个标签都属于同一类功能,就是框架内镶功能: 1)<frameset>意为把页面分解成一定部分,让每一部分显示不同的内镶框架,如(请复制到DW尝试): <html> < ...

  4. 【转】（DT系列二）device tree的书写规范

    原文网址:http://www.cnblogs.com/biglucky/p/4057478.html devicetree的书写规范 下面从节点,属性,reg,ranges,中断控制器等几个方面叙述 ...

  5. hdu-1010 dfs+剪枝

    思路: 剪枝的思路参考博客:http://www.cnblogs.com/zibuyu/archive/2012/08/17/2644396.html  在其基础之上有所改进 题意可以给抽象成给出一个 ...

  6. hyperVisors

    容器有效地将由单个操作系统管理的资源划分到孤立的组中,以更好地在孤立的组之间平衡有冲突的资源使用需求 期望继续进军中国市场 就像IBM公司,惠普公司和戴尔公司在中国服务器市场的霸主地位一样,Inspu ...

  7. I - Navigation Nightmare-poj 1984

    约翰和他的邻居生活在一个村庄里,他们的道路修建的很特别,都是正东正西或者正南正北,但是呢他们用一种方式描述他们和邻居的位置,比如说 6号 在1号 东面13处,那么我们就可以计算出来这两家的曼哈顿距离, ...

  8. DataTable与Linq相互转换

    DataTable通过dt.AsEnumerable()方法转换可用Linq查询,反之,Linq也可以转化为DataTableDataTable newDt = query1.CopyToDataTa ...

  9. 修改CKFinder上传路径

    一.CKFinder的若干问题 1.单独使用 ckfinder从原fckeditor分离出来以后可以单独使用,通常我习惯于在工具栏中添加ckfinder.dll,这样以后要使用ckfinder直接从工 ...

  10. python_Opencv_绘图

    opencv中也可以用一些函数来绘图 直接上源码,例子: # -*- coding: utf-8 -*- import numpy as np import cv2 # 黑色的图片 img=np.ze ...