学过javascript和接触过后端PHP语言必然要用到ajax,这是必学的一门学科,AJAX指的是Asynchronous JavaScript and XML,它使用XMLHttpRequest对象来与服务端脚本交流。请求方式，分为GET与POST： GET 最为常见的HTTP请求，普通上网浏览页面就是GET。GET方式的参数请求直接跟在URL后，以问号开始。

　　它可以发送和接收不同格式的信息，包括JSON，XML，HTML，AJAX最吸引人的特点是它的”async(异步)的本质，它意味着它可以做所有这些事情而不需要刷新页面。这使得你 可以基于用户事件只更新页面的一部分。AJAX执行完毕后才会继续运行其他代码页面假死状态解除。 而异步则这个AJAX代码运行中的时候其他代码一样可以运行。 jquery的async:false,这个属性 默认是true：异步，false：同步。

　　<html>
    <head>
        <meta charset = utf-8>
        <link rel="stylesheet" type="text/css" href = "bootstrap.css">
        <script type="text/javascript" src="jquery-1.9.1.js"></script>
    </head>
    <body>
        <!--布局-->
        <div class = "container">  <!--容器-->
            <div class = "panel panel-default"> <!--面板-->
                <div class = "panel panel-heading">
                    <h1>1409D学生信息</h1>
                </div>
                <div class="panel panel-body">
                    <div class="form-inline">
                        <div class="form-group">
                            <select class="form-control" id="select">  <!--下垃选项-->
                                <option value="">请选择根据什么查询</option>
                                <option value="name">姓名查询</option>
                                <option value="sex">性别查询</option>
                                <option value="age">年龄查询</option>
                                <option value="tel">电话查询</option>
                                <option value="addr">市场部查询</option>
                            </select>                                                    <!--输入框-->
                            <input type="text" id = "textname" class="form-control" placeholder="请输入查询内容">
                            <button class="btn btn-info" id="find">查询</button>
                            <button class="btn btn-link" id="all">显示所有</button>
                        </div>
                    </div>

<table class="table table-holder">  <!--表格-->
                        <thead>   <!--表头-->
                            <tr>
                                <th>姓名</th>
                                <th>性别</th>
                                <th>年龄</th>
                                <th>电话</th>
                                <th>市场部</th>
                            </tr>
                        </thead>
                        <tbody></tbody>   <!--内容主题-->
                    </table>
                </div>
            </div>
        </div>
    </body>
</html>
<script type="text/javascript">
    $(document).ready(function () {
        show(null,null);    //先默认为空值
        $("#find").click(function () {   //点击查找事件调用方法
            var select = $("#select").val();  //定义变量接收下拉选项
            var textname = $("#textname").val();   //定义变量接收文本框的值
            show(select,textname);
        })

$("#all").click(function () {    //点击all显视全部调用函数
            show(null,null);    //默认显示为空值
            $("#all").val("");   //赋空值
            $("#all option").eq(0).prop("selected",true);  //给all按键为下拉选项第一个值
        })
    })
    function show(select,textname) {  //show函数传参
            $.ajax({
            url:"show.php",   //地址文件路径
            data:{"select":select,"name":textname},  //数据传递参数
            dataType:"json",   //数据类型为json
            success:function (data) {   //成功时传参
                var tr="";   //定义变量
                $.each(data,function (key,value) {   //循环传递的键值
                    tr+="<tr><td>"+value[1]+"</td><td>"+value[2]+"</td><td>"+value[3]+"</td><td>"+value[4]+"</td><td>"+value[5]+"</td></tr>";
                })
                $("tbody").html(tr);  //替换每一行
            },
            error:function () {    //失败时提示失败
                alert('失败')
            }
        })
    }
</script>

剖析ajax的更多相关文章

  1. Django知识总汇

    基础 Django基础 Django基本命令 model系统 ORM基础 ORM字段和参数 ORM对数据库操作 ORM中介模型 ORM之其他骚操作 templates系统 模板语言 views系统 视 ...

  2. zepto.js之ajax剖析

    1.ajax的baseHeaders ajax插件中的baseHeaders对象的是http请求头部的信息 var mime = settings.accepts[dataType], baseHea ...

  3. Ajax详细剖析

    概述 对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 传统的Web应用 一个简单操作需要重新 ...

  4. Ajax技术剖析

    Ajax的全称是Asynchronous JavaScript and XML,是JS的特有功能,它作用是异步JS数据交互,即在不进行页面刷新的情况下进行部分数据的获取,性能较高.值得注意的是,仅有A ...

  5. Axios源码深度剖析 - 替代$.ajax，成为xhr的新霸主

    前戏 在正式开始axios讲解前,让我们先想想,如何对现有的$.ajax进行简单的封装,就可以直接使用原声Promise了? let axios = function(config){ return ...

  6. C#进阶系列——WebApi 路由机制剖析：你准备好了吗？

    前言:从MVC到WebApi,路由机制一直是伴随着这些技术的一个重要组成部分. 它可以很简单:如果你仅仅只需要会用一些简单的路由,如/Home/Index,那么你只需要配置一个默认路由就能简单搞定: ...

  7. AJAX初探,XMLHttpRequest介绍

    AJAX初探,XMLHttpRequest介绍 AJAX      AJAX = Asynchronous JavaScript and XML. 异步的JavaScript和XML.      AJ ...

  8. AJAX04 JQ的AJAX

    一.jQuery中的Ajax 1.jQuery为我们提供了更强大的Ajax封装 $.ajax({}) 可配置方式发起Ajax请求 $.get() 以GET方式发起Ajax请求 $.post() 以PO ...

  9. ajax回调打开新窗体防止浏览器拦截有效方法

    ajax回调打开新窗体防止浏览器拦截,就这么做! 问题剖析:   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function click_fun(){    window ...

随机推荐

  1. 移动端自动化测试之android模拟器问题集合

    黑屏 在做移动端自动化测试过程中,android模拟器启动黑屏的问题一直困扰着我,网上找了许多方法尝试了都不能解决我的问题,最后重新安装了镜像文件,问题才得以解决,当然并不是网上的解决办法都是错的,只 ...

  2. 神经网络与数字货币量化交易系列（1）——LSTM预测比特币价格

    首发地址:https://www.fmz.com/digest-topic/4035 1.简单介绍 深度神经网络这些年越来越热门,在很多领域解决了过去无法解决的难题,体现了强大的能力.在时间序列的预测 ...

  3. 最新 光环新网java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.优刻得等10家互联网公司的校招Offer,因为某些自身原因最终选择了优刻得.6.7月主要是做系统复习.项目复盘.LeetCo ...

  4. linux安装mysql(yum)

      申明,不要用root安装   步骤: 下载mysql的repo源 $ wget http://repo.mysql.com/mysql-community-release-el7-5.noarch ...

  5. lua添加自定义模块的步骤

    以下方法在lua 5.2.4版本下成功实现: 1. lua.c为所有函数的主程序,参考Makefile的编译链接2. lua.c中int main (int argc, char **argv) { ...

  6. CREATE TABLE——数据定义语言 (Data Definition Language, DDL)

    Sql语句分为三大类: 数据定义语言,负责创建,修改,删除表,索引和视图等对象: 数据操作语言,负责数据库中数据的插入,查询,删除等操作: 数据控制语言,用来授予和撤销用户权限. 数据定义语言 (Da ...

  7. 操作MySQL数据进行记录的随意排序

    说到排序,想必大家都知道MySQL中的“ORDER BY”这个关键词吧,使用它可以实现查询数据根据某一字段(或多个字段)的值排序,那么如何实现数据的任意排序操作呢? 其实这里我所说的“随意排序”,本质 ...

  8. superset部署

    superset功能概述: 丰富的数据可视化集 易于使用的界面,用于探索和可视化数据 创建和共享仪表板 与主要身份验证提供程序集成的企业级身份验证(通过Flask AppBuilder进行数据库,Op ...

  9. 安装sqlserver导致80端口被占用解决方法

    安装sqlserver导致80端口被占用解决方法 系统占用的端口一般都是微软官方的产品占用的.所以这个时候主要考虑到几个服务: SQL Server导致.其中很有可能是SQL Server Repor ...

  10. php中的访问类型（public，private，protected）

    类型的访问修饰符允许开发人员对类成员的访问进行限制,这是PHP5的新特性.但却是oop语言的一个好的特性.而且大多数的oop语言都已支持此特性.PHP5支持三种访问修饰符: public(公有的,默认 ...