<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>Ajax无刷新提交表单实例</title>

<script language="javascript">

function f1()

{

//创建xmlHttp对象

var xmlHttp;

if(window.ActiveXObject)

{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

else if(window.XMLHttpRequest)

{

xmlHttp=new XMLHttpRequest();

}

//获取表单值

var username=document.form1.username.value;

var password=document.form1.password.value;

var email=document.form1.email.value;

var datastr="username="+username+"&password="+password+"&email="+email;

var url="http://localhost/test.php";

//提交数据

xmlHttp.open("POST",url,false);

xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xmlHttp.send(datastr);

document.getElementById("d1").innerHTML="表单已提交";

}

</script>

</head>

<body>  

<div align="center">

用户登录

<div id="d1">  

</div>

<form id="form1" name="form1" method="post" action="">  

<table width="500" border="1" cellspacing="0" cellpadding="5">

<tr>

<td colspan="2" align="center" bgcolor="#CCCCCC"><strong>用户登录</strong></td>

</tr>

<tr>

<td width="101" align="right">用户名：</td>

<td width="393" align="left"><label>

<input type="text" name="username" />

</label></td>

</tr>

<tr>

<td align="right">密码：</td>

<td align="left"><label>

<input type="text" name="password" />

</label></td>

</tr>

<tr>

<td align="right">邮箱：</td>

<td align="left"><label>

<input type="text" name="email" />

</label></td>

</tr>

<tr>

<td align="right"> </td>

<td align="left"><label>

<input type="button" name="Submit" onclick="f1()" value="提交" />

<input type="reset" name="Submit2" value="重置" />

</label></td>

</tr>

</table>

</form>

</div>

</body>

</html>

　　

Ajax无刷新提交的更多相关文章

  1. Ajax.BeginForm()实现ajax无刷新提交

    1. 同时安装 Microsoft jQuery Unobtrusive ajax 和 jQuery Unobtrusive Ajax,如下图 安装完成之后多了如下的js库 2. 引用该js库 lay ...

  2. jQuery实现form表单基于ajax无刷新提交方法详解

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC &quo ...

  3. Ajax无刷新提交表单和显示

    ajax无刷新表单提交:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  4. jquey ajax 无刷新提交form

    http://bbs.csdn.net/topics/380237868 $.ajax({ type: "POST", url:ajaxCallUrl, data:$('#your ...

  5. DEDE使用AJAX无刷新提交Form表单，PHP返回结果

    $query = "INSERT INTO `{$diy->table}` (`id`, `ifcheck` $addvar)  VALUES (NULL, 0 $addvalue); ...

  6. 不使用ajax,无刷新提交表单

    <form action="form_action.asp" method="get" onsubmit"check_form()" ...

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

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

  8. ajax无刷新方式收集表单并提交表单

    ajax无刷新方式收集表单有两种方式, 一个是使用html5的FormData.一个是传统的方式. 一,FormData,在主流的浏览器中可以用,IE不好用啊. 另外,FormData使用有两个条件, ...

  9. 表单 - Form - 无刷新提交原理

    为什么Form组件的表单提交可以做到无刷新? EasyUI在提交的时候,将表单作为一个隐藏的iframe进行的提交,并不是我们看到的那个表单进行的提交 并且那个iframe使用了绝对定位,保证页面上不 ...

随机推荐

  1. Fengshui-[SZU_B40]

    Description Fengshui is an ancient subject in Chinese tradition. Someone considers it as science and ...

  2. linux gdb 没有符号表被读取。请使用 "file" 命令。

    使用gdb时遇到这个问题,刚开始接触linux下使用gdb调试程序,其原因是生成的二进制可执行文件没有使用-g选项. gcc中-g选项是为了获得有关调试信息,要用gdb进行调试,必须使用-g生成二进制 ...

  3. JS实现上下左右四方向无间隙滚动

    想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出< marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路: ...

  4. Delphi中控制Excel(转载)

    用Delphi从数据库中取得资料,然后导出到Excel中做成报表是个不错的选择,因为Excel强大的报表功能那可是没话说前提Delphi中要 uses comobj;var Excel:Variant ...

  5. MySQL 里面的Where 和Having和Count 和distinct和Group By对比

    mysql> select accid as uid,date(datetime) AS datetime from game.logLogin GROUP BY accid HAVING da ...

  6. PHP 实现 一致性哈希 算法(转的)

    <?php /** * Flexihash - A simple consistent hashing implementation for PHP. * * The MIT License * ...

  7. handler的理解笔记

    应用程序启动时,Android首先会开启一个主线程,如果此时需要一个耗时的操作,你不能把这些操作放在主线程中,如果你放在主线程中的话,界面会出现假死现象,这个时候我们需要把这些耗时的操作,放在一个子线 ...

  8. mysql主从复制 主主复制 读写分离

    首先是mysql的主从复制很简单 主主复制也就是互相主从最麻烦的最难的就是日志恢复,增量恢复什么的比较复杂 首先如果你不会安装mysql版本最好一样,或者往上的版本,因为mysql是向下兼容 请注意不 ...

  9. jQuery EasyUI DataGrid Checkbox 数据设定与取值

    纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...

  10. hrbust oj 1526+2028 树状数组

    冒泡排序中 如果一个数的后面的某个数和这个数不符合排序规则 那么这个数就会在未来的某次冒泡中与那个数进行交换 这里用到了 树状数组求逆序数的办法来做 需要注意的是2028并不可以改完数组大小后直接套1 ...