<!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. unity button

    #pragma strict var buttonTexture:Texture2D; private var str:String; private var frameTime:int; funct ...

  2. robotium 新建 android 测试项目：

    注意:新建项目后再运行前一定要修改Manifest文件中的instrumentation 中的target package, 这个是测试的入口 1. 程序开始要通知系统我要测的app是什么 如何知道a ...

  3. IOS 项目 小说 1

    架构: logo: logo标识(在image文件夹中修改某图片名称为icon) default: 默认页面的启动效果(在image文件夹中修改某图片名称为Default) image:存放图片(根目 ...

  4. object-c 要理解协议的几个重要概念

    协议的声明/定义 调用协议 设置委托 协议的实现

  5. 【BZOJ】1069: [SCOI2007]最大土地面积（凸包+旋转卡壳）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1069 显然这四个点在凸包上,然后枚举两个点找上下最大的三角形即可. 找三角形表示只想到三分QAQ.. ...

  6. [BZOJ 4436][Cerc2015]Kernel Knights

    [Cerc2015]Kernel Knights Time Limit: 2 Sec Memory Limit: 512 MBSubmit: 5 Solved: 4[Submit][Status][D ...

  7. shell字符串和数组

    字符串 : 1．单引号: str = 'value' 单引号字符串的限制: 单引号里的任何字符都会原样输出,单引号字符串中的变量是无效的: 单引号字串中不能出现单引号(对单引号使用转义符后也不行); ...

  8. poi读写word模板 / java生成word文档

    有一word文档表格 形如: 姓名 ${name} 电话 ${tel} 从数据库读取记录替换上述变量 import java.io.FileOutputStream; import java.util ...

  9. NSJSONSerialization介绍

      ios5中apple增加了解析JSON的api——NSJSONSerialization.网上已经有人做过测试,NSJSONSerialization在效率上完胜SBJSON.TouchJSON. ...

  10. 获取某个Group中所有对象的DisplayName

    $SANs = Get-ADGroupMember -Identity "CN=gAPCHN-HGZ-IE10-Users,OU=Groups,OU=Hangzhou - China,OU= ...