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

时间：2022-09-09 16:32:23
<!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&plus;FormData&plus;javascript实现无刷新表单信息提交

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

  2. ajax&plus;FormData&plus;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&period;pushState无刷新改变页面URL onpopstate（转）

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

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

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

随机推荐

  1. 【最新】2015年7月之15个最新jQuery插件

    Hello,一个激动人心的好消息,现在我为大家整理最近7月发布的jQuery插件. 如果你熟悉任何下面列出的插件,请分享你的反馈与我们的读者,或如果你知道哪一个我们没有收录,那么请与我们分享在下面的评 ...

  2. 在cxf中使用配置避免增加字段导致客户端必须更新、同步实体属性的问题

    在使用cxf实现webservice时,经常碰到的问题就是如果在服务端,修改了一个接口的签名实现,如增加一个字段,或者删除一个字段.在这种情况下,在默认的配置中,就会报以下的错误信息: org.apa ...

  3. js 获取div 图片高度

    使用jquery获取网页中图片的高度其实很简单,有两种常用的方法都可以打到我们的目的 $("img").whith();(返回纯数字) $("img").css ...

  4. Winfrom DateGridView 实现Button列禁用

    Form窗体如下所示: 实现如下: using System; using System.Collections.Generic; using System.Drawing; using System ...

  5. XVIII Open Cup named after E&period;V&period; Pankratiev&period; GP of Urals

    A. Nutella’s Life 斜率优化DP显然,CDQ分治后按$a$排序建线段树,每层维护凸包,查询时不断将队首弹出即可. 时间复杂度$O(n\log^2n)$. #include<cst ...

  6. 配置IDM不限速下载百度云的大文件

    IDM介绍Internet Download Manager(简称IDM)是一个用于Windows系统的下载管理器,它是共享软件,免费试用期为30天,但是每月均有一段时间优惠. IDM可以让用户自动下 ...

  7. &lbrack;转帖&rsqb;Docker四种网络模式

    Docker(十四)-Docker四种网络模式 https://www.cnblogs.com/zhuochong/p/10069293.html 计算机网络相关的知识 非常有用.. Docker 安 ...

  8. 28&period;json数组，select选择，input输出对应数据

    效果:选择对应的车类,下面的input会实时出现车价. html: <form action="" class="priceModelform1"> ...

  9. 电脑不能上网win7 解决办法

    情况一览: 电脑连的是WIFI 手机能上,局域网其他电脑能上 电脑浏览器打不开网页 问题解决: //win+R 快捷键进入cmd 1.ipconfig 看电脑有没有ip 2.ipconfig nslo ...

  10. C&num; fckeditor浏览服务器和上传目录不一致，看不到上传过的文件

    fckeditor在上传标签页面,传过文件后,在浏览服务器那里,看不到之前上传的文件,通过浏览服务器页面上传文件,保存的目录也和上传标签页面上传的不是同一个文件夹. 修改方法如下: 打开fckedit ...

相关文章