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. 使用Unidac内置连接池

    第一步: 放一个TUniconnection并设置相关属性 之后直接使用TUniconnection对象即可 跟踪unidac源码uni单元1540行中可以看到 Connect方法调用CreateIC ...

  2. 安装Cocoa 新的依赖管理工具Carthage

    Cocoa的依赖管理器,我们已经有了CocoaPods,非常好用,那么为什么还要创建这样一个项目呢?本文翻译自Carthage的Github的README.md,带大家来了解一下这个工具有何不同之处. ...

  3. Windows server2008 搭建ASP接口访问连接oracle数据库全过程记录--备用

    真的是太不容易了,以前的时候在window server 2003上面搭建了一套asp+oracle的接口系统,就费了好大的劲儿,其实那会迷迷瞪瞪的也不知道怎么的就弄好了,也懒得管了.OK,从昨天到今 ...

  4. C/S和B/S两种软件体系结构

    目前两种流行的软件体系结构就是C/S和B/S体系结构,下面对两种体系结构进行一下总结: 1.C/S(客户端/服务器模式): 客户端和服务器都是独立的计算机,客户端是面向最终用户的应用程序或一些接口设备 ...

  5. Windows Xp Home Edition 安装IIS组件

    问题描述: 在虚拟机(操作系统是Windows Xp Home Edition)中安装Sql Server 2005的时候警告缺少IIS相关组件,控制面板"添加/删除组件"中也没有 ...

  6. Security 可视化

    http://web.cs.ucdavis.edu/~ma/SecVis/ http://research.dbvis.de/security/tools/clockview/ http://raff ...

  7. Eclipse怎样导入github上的项目

    国外有些比较好的源代码网站,经常需要从这些网站上导入项目到eclipse中,我最近就发现github.com这个网站上有很多开源项目.这里就以从github网站上导入项目到eclipse中为例来详细的 ...

  8. jQuery zTree v3.5 实例3 异步树

    最终效果: 点击非叶子节点时,向后台发送请求,获取下级菜单 前台代码如下: <%@ page language="java" contentType="text/h ...

  9. 【HDOJ】4553 约会安排

    线段树.线段树的细节很重要,小数据遍历可以发现问题. /* 4553 */ #include <iostream> #include <string> #include < ...

  10. 【CF】222 Div.1 B Preparing for the Contest

    这样类似的题目不少,很多都是一堆优化条件求最优解,这个题的策略就是二分+贪心.对时间二分, 对费用采用贪心. /* 377B */ #include <iostream> #include ...