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. 在ubuntu下利用minicom实现串口通信

    windos有串口调试助手,linux下也有这样的工具——minicom.不过,minicom和linux下的许多工具都一样,也是命令行模式,没有图形化界面供我们享受.作为一款串口调试工具,虽然难看但 ...

  2. http协议请求规则与dotNet的解析

    请求方法URI协议/版本 请求的第一行是"方法URL议/版本":GET/sample.jsp HTTP/1.1 以上代码中"GET"代表请求方法,"/ ...

  3. 关于Java（介绍）

    基于Java官方指导文档,开展学习 Java是什么 Java 是编程语言,也是一个平台 特性 简单 可移植 面向对象 分布式运算高性能 健壮 安全 动态 体系结构中立 记忆宫殿:恋爱是件简单的事,但放 ...

  4. sharepoint 2013 安装配置PowerView

    安装sharepoint 2013 网络上有很多说明.这里列出两个实例: 1.说得比较详细,并提供了下载连接:http://www.sqlant.com/2012/10/sharepoint-2013 ...

  5. 小波变换 C++ opencv 实现

    小波变换 C++ opencv 实现 小波简介: http://www.blogbus.com/shijuanfeng-logs/221293135.html 源码:   /// 小波变换 Mat W ...

  6. Google DNS劫持背后的技术分析

    0×00 背景 最近世界真是越来越不太平了,尤其是对于大部分普通人而言.昨天又传来噩耗,根据网络监测公司BGPMon,Google的公开DNS服务器 IP 8.8.8.8被劫持到了委内瑞拉和巴西超过2 ...

  7. 在android4.0中实现View的拖动效果

    实现方法: 首先需要定义一个支持拖动的源组件和一个作为Drop区域的目标组件. 在支持拖动的组件中注册OnTouchListener 或LongClickListener监听事件,构建一个ClipDa ...

  8. 利用CMake生成动态或静态链接库工程

    install解释: TARGETS版本的install命令 install(TARGETS targets... [EXPORT <export-name>] [[ARCHIVE|LIB ...

  9. 【HDOJ】4183 Pahom on Water

    就是一个网络流.red结点容量为2,查看最大流量是否大于等于2.对于条件2,把边反向加入建图.条件1,边正向加入建图. /* 4183 */ #include <iostream> #in ...

  10. 灰度图像--图像增强 直方图均衡化（Histogram equalization）

    灰度图像--图像增强 直方图均衡化(Histogram equalization) 转载请标明本文出处:http://blog.csdn.net/tonyshengtan,欢迎大家转载,发现博客被某些 ...