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. Python开发之--前端 HTML基础

    一:HTML介绍 HTML:超文本标记语言,标准通用标记语言下的一个应用.包括"头"部分(英语:Head).和"主体"部分(英语:Body),其中"头 ...

  2. RESTheart官方文档

    作者:Andrea Di Cesare, Maurizio Turatti RESTHeart是SoftInstigate公司创建并开发的开源项目. MongoDB的WEB操作接口 RESTHEART ...

  3. 【Python网络爬虫三】 爬去网页新闻

    学弟又一个自然语言处理的项目,需要在网上爬一些文章,然后进行分词,刚好牛客这周的是从一个html中找到正文,就实践了一下.写了一个爬门户网站新闻的程序 需求: 从门户网站爬取新闻,将新闻标题,作者,时 ...

  4. jedis源码阅读

    package redis.clients.jedis; import java.util.ArrayList; import java.util.HashSet; import java.util. ...

  5. 大数据量查询优化——数据库设计、SQL语句、JAVA编码

    数据库设计方面: 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将 ...

  6. 有很多功能交给IIS实现就好了啊，之前干嘛要自己写？

    比方说设置默认主页啊,错误页伪静态之类的

  7. python中的单下划线和双下划线意义和作用

    Python中并没有真正意义上的“私有”,类的属性的的可见性取决于属性的名字(这里的属性包括了函数).例如,以单下划线开头的属性(例如_spam),应被当成API中非公有的部分(但是注意,它们仍然可以 ...

  8. bzoj 1195: [HNOI2006]最短母串 爆搜

    1195: [HNOI2006]最短母串 Time Limit: 10 Sec  Memory Limit: 32 MBSubmit: 894  Solved: 288[Submit][Status] ...

  9. js 正则 非负整数

    Javascript 正则表达式 非负整数 /** * 正则判断非负整数 */ function testnum(ob){ var reg=/^[0-9]+?$/; //如果正则需要判断非负整数并带2 ...

  10. 带你了解世界最先进的手势识别技术 -- 微软，凌感，Leap...

    转载 今天为大家解释一下现有的几种主要的手势识别技术,为你揭开手势识别技术的神秘面纱. 概述 谈起手势识别技术,由简单粗略的到复杂精细的,大致可以分为三个等级:二维手型识别.二维手势识别.三维手势识别 ...