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. Tekla Structures 使用类库概览

    Tekla Structures 2016 已经发布了,使用了 Ribbon 的全新 UI 风格,比以前要漂亮许多. 不过功能方面貌似没啥大的改进,感觉天宝的主要精力都投入到了混凝土模块上,忙着和别人 ...

  2. bzoj 2746: [HEOI2012]旅行问题 AC自动机fail树

    2746: [HEOI2012]旅行问题 Time Limit: 30 Sec  Memory Limit: 256 MBSubmit: 489  Solved: 174[Submit][Status ...

  3. bzoj 3328: PYXFIB 数论

    3328: PYXFIB Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 130  Solved: 41[Submit][Status][Discuss ...

  4. 不可忽视的 .NET 应用5大性能问题

    [编者按]本文系国内 ITOM 管理平台 OneAPM 翻译自 Steven Haines 的文章.Steven Haines 是 Pisksel 技术架构师,目前在奥兰多迪士尼乐园工作.他是在线教育 ...

  5. django ORM中update_or_create功能，如果只要匹配某一特定字段呢

    今天发现的需求,在官方文档找到说法: In English, that means start with any non-'defaults' keyword argument that doesn’ ...

  6. 【Earthquake, 2001 Open 】 0-1 分数规划

    71  奶牛施工队一场地震把约翰家园摧毁了,坚强的约翰决心重建家园.约翰已经修复了 N 个牧场,他需要再修复一些道路把它们连接起来.碰巧的是,奶牛们最近也成立了一个工程队,专门从事道路修复.而然,奶牛 ...

  7. UVA 1513 Movie collection

    #include<stdio.h> #include<string.h> #include<stdlib.h> #define N 200010 #define l ...

  8. Navigation Drawer介绍

    在2013 google IO当天,Android团的更新了Support库,新版本(V13)的Support库中新加入了几个比较重要的功能. 添加 DrawerLayout 控件,支持创建  Nav ...

  9. Android ListView中 每一项都有不同的布局

    实现代码 Adapter的代码 其中:ViewHolder分别是三个不同的布局,也就是ListView中每一项的布局 TYPE_1...是三种类型. 在使用不同布局的时候,getItemViewTyp ...

  10. jap中文转码

    因为js url在传值的过程中使用的是js自己默认的字符集编码规则,我们必须把它转成属于我们自己的编码规格,JSP页面 url=encodeURI(encodeURI(url)); //用了2次enc ...