ajax 小案例
ajax 异步提交数据，实现无刷新提交表单
ajax.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<span> 用户名：<input type="text" name="name" /> <span id="span"></span></span><br />
<div id="div">
<input type="button" value="点击" onclick="ajax()" />
</div>
<span> 用户名：<input type="text" name="name" /> <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 小案例的更多相关文章
- JSONP跨域访问百度实现搜索提示小案例
一.JSONP简介 JSONP 全称 JSON with padding(填充式 JSON 或参数式 JSON),JSONP实现跨域请求的原理,就是动态创建<script>标签,然后利用& ...
- javascript常用小案例
常用javascript小案例 样式调节 //注: 这个可以控制td中的字段成行显示 #modelInfos td,th { white-space: nowrap; } //文本输入框随着内容尺寸往 ...
- ES6基础与解构赋值（高颜值弹框小案例！）
let只作用在当前块级作用域内使用let或者const声明的变量,不能再被重新声明let不存在`变量提升` console.log(dad); var dad = '我是爸爸!';//预定义undef ...
- 机械表小案例之transform的应用
这个小案例主要是对transform的应用. 时钟的3个表针分别是3个png图片,通过setInterval来让图片转动.时,分,秒的转动角度分别是30,6,6度. 首先,通过new Date函数获取 ...
- shell讲解-小案例
shell讲解-小案例 一.文件拷贝输出检查 下面测试文件拷贝是否正常,如果cp命令并没有拷贝文件myfile到myfile.bak,则打印错误信息.注意错误信息中basename $0打印脚本名.如 ...
- [jQuery学习系列六]6-jQuery实际操作小案例
前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> &l ...
- 02SpringMvc_springmvc快速入门小案例（XML版本）
这篇文章中,我们要写一个入门案例,去整体了解整个SpringMVC. 先给出整个项目的结构图:
- React.js入门小案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- SqlDependency缓存数据库表小案例
SqlDependency的简介: SqlDependency是outputcache网页缓存的一个参数,它的作用是指定缓存失效的数据库依赖项,可以具体到数据库和表. SqlDependency能解决 ...
随机推荐
- Intel项目Java小记
cannot be cast to javax.servlet.Filter添加provided即可 install -X是什么意思? Unsupported major.minor version ...
- WordPress标题函数wp_title()详解
在wp_title()中通常是在页面头部的title元素中.当wp_title()在主页主循环(loop)外时,可以用在模板的任何地方. 用法: <?php wp_title( $sep, $e ...
- js带缩略图的图片切换效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- EF4 Code First和EF6 Code First链接mysql的方法
1.首先需要下载安装.Net的Mysql驱动 下载地址如下:http://dev.mysql.com/downloads/connector/net/ 2.配置Web.Config EF6: 配置链接 ...
- 二师兄VPN加速器
http://www.2-vpn2.org/home.action?ic=B003CC4C47
- python学习之---匿名函数，返回函数，偏函数
1. 返回函数: 所谓的返回函数,指的是函数作为返回值.高阶函数除了可以接受函数作为参数外,同样可以接受函数作为结果返回.以下是一个可变参数的求和例子,一般求和函数是如此这般定义的: >> ...
- 【BZOJ 2333 】[SCOI2011]棘手的操作（离线+线段树）
2333: [SCOI2011]棘手的操作 Description 有N个节点,标号从1到N,这N个节点一开始相互不连通.第i个节点的初始权值为a[i],接下来有如下一些操作: U x y: 加一条边 ...
- 【CF】283D Tennis Game
枚举t加二分判断当前t是否可行,同时求出s.注意不能说|a[n]| <= |3-a[n]|就证明无解,开始就是wa在这儿了.可以简单想象成每当a[n]赢的时候,两人都打的难解难分(仅多赢一轮): ...
- [LeetCode#218] The Skyline Problem
Problem: A city's skyline is the outer contour of the silhouette formed by all the buildings in that ...
- BZOJ_1497_[NOI2006]_最大获利_(最大流+最大权闭合图)
描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1497 共n个站点,给出建立每个站点所需要的花费.现在有m个客户需要开通服务,每个客户需要有两个 ...