zoukankan      html  css  js  c++  java
  • Ajax的使用

      Ajax又称异步刷新,可实现局部刷新的功能。

        1.因为Ajax是jQuery内的一种方法,需先引用jQuery包:

    <script src="bootstrap/js/jquery-1.11.2.min.js"></script>

        2.设置一个文本框,可以检测输入的内容是否存在,并设置一个提示内容:

    <div>
      <input type="text" id="uid" />
      <span id="ts"></span>
    </div>

        3.添加事件:

    <script type="text/javascript">
    $("#uid").blur(function(){    //当失去焦点时触发该函数
        //取用户名
        var uid = $(this).val();
        //判断用户名是否存在,访问数据库
        $.ajax({
            url:"chuli.php", //处理页面的路径
            data:{uid:uid}, //要提交的数据
            type:"POST", //提交方式
            dataType:"TEXT", //返回数据类型
            success:function(data){ //回调函数
                if(data=="1"){
                    $("#ts").text("该用户名已存在");
                    $("#ts").css("color","red");
                }else{
                    $("#ts").text("该用户名可用");
                    $("#ts").css("color","green");
                }
            }
        });
    })
    </script>
    <?php
    $uid = $_POST["uid"];
    require_once "../crud/DBDA.class.php";
    $db = new DBDA();
    $sql = "select count(*) from login where username='{$uid}'";
    
    $arr = $db->query($sql);
    
    echo $arr[0][0];

        Ajax中常用的参数:

          url:处理页面的路径;

          data:传递的数据,后面的参数中“:”前面的为名字,不会被解析,后面的为值;

          type:提交方式,有两个参数,"POST"和"GET";

          dateType:返回数据类型,常用的参数有:

            "TEXT":返回字符串,用于返回简单的字符串;

            "JSON":返回JSON数据,用于返回大量的数据,如要实现跨域访问,可使用"JSONP";

            "XML":返回XML(可扩展标记语言)文档,同样用于返回大量的数据,这种更复杂;

          success:处理方法成功后执行,后面加function函数,为回调函数;

          async:为设置同步(false)、异步(true),同步表示=处理页面全部处理完后再执行,而异步为与处理页面同时执行,默认为异步;

          beforeSend:在发送请求前执行该函数,后面加function函数,可与success同时使用,增加用户体验性;

          complete:请求完成后执行,后面加function函数,可以在方法不成功的情况下执行;

          error:出错时调用,后面加function函数;

          timeout:设置超时时间,后面加数字,单位为毫秒,超时会自动结束程序。

  • 相关阅读:
    JavaScript 时间帮助封装
    EntityFramework 基类重写
    sql server 大数据, 统计分组查询,数据量比较大计算每秒钟执行数据执行次数
    C# DataTable 转实体对象
    EF自动创建数据库步骤之四(启用数据库初始器)
    EF自动创建数据库步骤之三(自定义数据库初始器)
    EF自动创建数据库步骤之二(继承DbContext类)
    EF自动创建数据库步骤之一(实体类写法)
    十大排序算法_java实现
    位运算
  • 原文地址:https://www.cnblogs.com/maoqiaoyu123/p/8370829.html
Copyright © 2011-2022 走看看