ajax 异步提交数据,实现无刷新提交表单

ajax.html

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<span> 用户名:<input type="text" name="name" />&nbsp;&nbsp;<span id="span"></span></span><br />
<div id="div">
<input type="button" value="点击" onclick="ajax()" />
</div>
<span> 用户名:<input type="text" name="name" />&nbsp;&nbsp;<span id="span2"></span></span><br />
<div id="div2">
<input type="button" value="点击" onclick="ajax2()" />
</div> <script> function ajax(){
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else
xmlHttp = ActiveXObject("Microsoft.XMLHTTP"); xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var inner =xmlHttp.responseText;
var obj = eval(inner);
// alert(obj);
document.getElementById("span").innerHTML = obj[0].first;
}
} xmlHttp.open("GET","ch.json",true);
xmlHttp.send();
} function ajax2(){
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else
xmlHttp = ActiveXObject("Microsoft.XMLHTTP"); xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var inner =xmlHttp.responseText;
var obj = eval(inner);
document.getElementById("span2").innerHTML = obj[0].second;
}
} xmlHttp.open("GET","ch.json",true);
xmlHttp.send();
}
</script>
</body>
</html>

ch.json

 {
[
{"first":"用户名可以用","second":"用户名不可以用"}
]
}

结果图:

ajax 小案例的更多相关文章

  1. JSONP跨域访问百度实现搜索提示小案例

    一.JSONP简介 JSONP 全称 JSON with padding(填充式 JSON 或参数式 JSON),JSONP实现跨域请求的原理,就是动态创建<script>标签,然后利用& ...

  2. javascript常用小案例

    常用javascript小案例 样式调节 //注: 这个可以控制td中的字段成行显示 #modelInfos td,th { white-space: nowrap; } //文本输入框随着内容尺寸往 ...

  3. ES6基础与解构赋值(高颜值弹框小案例!)

    let只作用在当前块级作用域内使用let或者const声明的变量,不能再被重新声明let不存在`变量提升` console.log(dad); var dad = '我是爸爸!';//预定义undef ...

  4. 机械表小案例之transform的应用

    这个小案例主要是对transform的应用. 时钟的3个表针分别是3个png图片,通过setInterval来让图片转动.时,分,秒的转动角度分别是30,6,6度. 首先,通过new Date函数获取 ...

  5. shell讲解-小案例

    shell讲解-小案例 一.文件拷贝输出检查 下面测试文件拷贝是否正常,如果cp命令并没有拷贝文件myfile到myfile.bak,则打印错误信息.注意错误信息中basename $0打印脚本名.如 ...

  6. [jQuery学习系列六]6-jQuery实际操作小案例

    前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> &l ...

  7. 02SpringMvc_springmvc快速入门小案例(XML版本)

    这篇文章中,我们要写一个入门案例,去整体了解整个SpringMVC. 先给出整个项目的结构图:

  8. React.js入门小案例

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  9. SqlDependency缓存数据库表小案例

    SqlDependency的简介: SqlDependency是outputcache网页缓存的一个参数,它的作用是指定缓存失效的数据库依赖项,可以具体到数据库和表. SqlDependency能解决 ...

随机推荐

  1. Python学习_数据处理split方法

    用open方法导入文件“sketch.txt”后,用split()方法进行分割: >>> import os >>> os.chdir('C:/Python33/H ...

  2. Python的数字类型及其技巧

    Python中的数字类型 int float fractions.Fraction decimal.Decimal 数字的舍与入 int(f):舍去小数部分,只保留整数部分,所以int(-3.8)的结 ...

  3. Django: ModelForm中Meta的fields等成员介绍

    class MyForm(forms.ModelForm): realname = forms.CharField() phone = forms.CharField() class Meta: mo ...

  4. bzoj 2402: 陶陶的难题II 二分答案维护凸包

    2402: 陶陶的难题II Time Limit: 40 Sec  Memory Limit: 128 MBSec  Special JudgeSubmit: 68  Solved: 45[Submi ...

  5. ember.js

    http://blog.geoinker.com/2012/12/29/seven-javascript/ http://www.csdn.net/article/2013-04-15/2814893 ...

  6. centos网络安装中的注意点

    转自centos网络安装中的注意点 centos网络安装的教程网上很多,这里仅仅记录一下安装过程中网上别处提及很少的注意点. 1.centos默认会安装selinux,并且默认阻止ftp服务,所以要禁 ...

  7. Tmux:终端复用器

    转自Tmux:终端复用器 Tmux 是一个 C 语言编写的终端,它能够在单一窗口中同时访问和控制多个终端.它是一个类似于GNU Screen 的工具.使用它,用户可以在 Linux 系统上管理多个任务 ...

  8. IAR ARM、IAR STM8、IAR MSP430共用一个IDE

    转自IAR ARM.IAR STM8.IAR MSP430共用一个IDE 试了安装好多个不同版本不同编译器的IAR,终于明白不同编译器的IAR共用IDE的条件,把几个不同编译器的IAR安装在一起,共用 ...

  9. python 替换windows换行符为unix格式

    windows 默认换行符为 \r\n; unix默认换行符为 \n; 所以当win下编辑的脚本在linux下显示末尾多了^M: 换行符修改为同一的unix格式脚本如下: def run(path,f ...

  10. unicode下各种类型转换CString、string

    把最近用到的各种unicode下类型转换总结了一下: 1.string转CString string a=”abc”; CString str=CString(a.c_str()); 或str.for ...