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. android alipay（移动支付，异步通知发起失败，但是支付成功）

    问题1:移动支付 demo测试,支付成功,但是异步通知没发起,help notify_url 需要服务器地址,不是本地网址 问题2:这回 支付成功了.也返回到return_url了.但是页面显示验证失 ...

  2. XMLHttpRequest 使用概括

    ***********************************************XMLHttpRequest对象初始化:********************************* ...

  3. C# 网页自动填表自动登录(转)

    自动填表的方式有很多,关键是获取控件的id或者name. 比如源代码有 <input id="pwdInput" tabindex="2" class=& ...

  4. android开发环境重装系统之后的配置

    前提: 之前配置好的android开发环境:重装系统:压缩了android目录 配置: 安装java环境 安装; 建立JAVA_HOME变量:JAVAHOME添加到path变量 JAVA_HOME=C ...

  5. Android 向系统添加一个联系人信息contact

    private void writeContacts() { Uri rawContacts = Uri.parse("content://com.android.contacts/raw_ ...

  6. Android 使用XmlPullParser解析xml

    这里我们假设要解析的xml文件名为:test.xml,我们将其放在assets路径中. xml文件内容为: <?xml version='1.0' encoding='utf-8' standa ...

  7. POJ - 3264 Balanced Lineup 线段树解RMQ

    这个题目是一个典型的RMQ问题,给定一个整数序列,1~N,然后进行Q次询问,每次给定两个整数A,B,(1<=A<=B<=N),求给定的范围内,最大和最小值之差. 解法一:这个是最初的 ...

  8. Qt浅谈之三十九圆形进度条（已经有50篇了）

    http://blog.csdn.net/taiyang1987912/article/category/2314763

  9. Rewriting History with Git Rebase

    http://code.tutsplus.com/tutorials/rewriting-history-with-git-rebase--cms-23191 1. Rebasing for a Li ...

  10. 一起啃PRML - 1.2.1 Probability densities 概率密度

    一起啃PRML - 1.2.1 Probability densities @copyright 转载请注明出处 http://www.cnblogs.com/chxer/ 我们之前一直在讨论“谁取到 ...