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能解决 ...
随机推荐
- android中listview的item滑动删除效果(已解决listview点击问题)
领导看到iphone上tableview有个滑动删除的效果,要求在android上也实现,搜了下资料,实现起来比较简单,可弄到后面,居然不能点击了,把一篇文章中的代码修改了一下,捣鼓了一番,搞定,下面 ...
- How to get Directory size in IsolatedStorage of Windows Phone 8 App
There is no API to get the total size of a specific directory in the isolated storage. Therefore, th ...
- Toy Storage
Toy Storage 题型与2318 TOYS一样,注意要对线段排序,现在模板又更新了~~ #include<iostream> #include<cstdio> #incl ...
- BZOJ2191Splite
Description 给两个多边形,问否在平移旋转不翻转不重叠的情况下拼成一个凸多边形. Input 每组第一行一个数N表示第一个多边形的顶点数,下接N行按顺序(逆/顺时针)给出顶点坐标,再下一行给 ...
- C++引用作为函数的参数
引用也可以作为一个函数的参数,如:我们定义交换两个数的函数swap,将函数的参数定义成引用的形式: void swap(int &p1, int &p2) //此处函数的形参都是引用 ...
- 21个很棒的jQuery分页插件下载
分页是指将一个大内容划分为各种不同的页面,因此网站的分页是一个很重要的部分,必须让内容有组织性和易于访问.分页有各两种不同的方式,手动跟自动.最受欢迎简单和广泛的方法是jQuery插件.下面我们收集了 ...
- Http协议Get方式获取图片
一. 二. 我试了试,Post方式也行啊,干嘛要叫强调Get方式,费解~~ 答曰:get是向服务器请求数据,p ...
- binder
Service与Android系统设计(7)--- Binder驱动 http://blog.csdn.net/21cnbao/article/details/8087354 Android Bind ...
- Android Training精要(四) Intent注意事项
判断有处理Intent的Activity PackageManager packageManager = getPackageManager(); List<ResolveInfo> ac ...
- Linux libtins 库安装教程
因为工作原因需要用到libtins网络库, 所以今天去装一下. 很尴尬,由于本人对linux理解比较浅, 所以在中途遇到了一些问题. 虽然只是简单的安装步骤,但是阻挡不了自己菜啊. 一. 下载lib ...