<!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. HDU1116 Play on Words（有向图欧拉通路）

    我把单词当作点,然后这样其实是不对的,这样就要判定是否是哈密顿通路.. 这题应该把单词的首尾单词当作点,而单词本身就是边,那样就是判定欧拉通路了. 有向图包含欧拉通路的充要条件是:首先基图连通,然后是 ...

  2. 跳舞毯[XDU1005]

    Problem 1005 - 跳舞毯 Time Limit: 2000MS   Memory Limit: 65536KB   Difficulty: Total Submit: 308  Accep ...

  3. Java多线程初学者指南系列教程

    转自:http://developer.51cto.com/art/200911/162925.htm 51cto 本系列来自NokiaGuy的“真的有外星人吗”博客,系列名称为<Java多线程 ...

  4. TYVJ P1013 找啊找啊找GF Label：动态规划

    做题记录:2016-08-15 22:19:04 背景 MM七夕模拟赛 描述 "找啊找啊找GF,找到一个好GF,吃顿饭啊拉拉手,你是我的好GF.再见.""诶,别再见啊.. ...

  5. java不用jni，也可以获得当前系统性能信息

    最近做个项目,就是要取得cpu占有率等等的系统信息,一开始以为要用动态链接库了,但后来发现可以像下面这样做,不去调用jni,这样省去了很多看新技术的时间o(∩_∩)o... 在Java中,可以获得总的 ...

  6. Shell之sed用法 转滴

    通过例子学习sed的用法 1,sed介绍    sed可删除(delete).改变(change).添加(append).插入(insert).合.交换文件中的资料行,或读入其它档的资料到 文> ...

  7. 什么是SQL注入式攻击

    什么是SQL注入式攻击? 所谓SQL注入式攻击,就是攻击者把SQL命令插入到Web表单的输入域或页面请求的查询字符串,欺骗服务器执行恶意的SQL命令.在某些表单中,用户输入的内容直接用来构造(或者影响 ...

  8. hdu 3348 coins

    这道题算是一道很经典的题,很好的诠释了贪心和动态规划的不同功能.求最少钱的数量用贪心就够了,但是求最多钱的数量要用到动态规划的思想,每步都尽量保留最大 数量.具体看程序注解: #include&quo ...

  9. FastDFS 安装

    FastDFS(centerOs) 安装包:FastDFS_v5.07.tar libfastcommon-master.zip(是从 FastDFS 和 FastDHT 中提取出来的公共 C 函数库 ...

  10. MongoDB数据备份与恢复

    测试环境:windows 一. 导出数据F:\DbSoft\soft\master\bin>mongoexport /h 127.0.0.1 /port 50000 /d testdb /c t ...