AJAX的应用场景

1.异步搜索过滤内容数据

2.表单异步验证

3.异步加载页面“更多”数据

4.异步处理登录

5.异步处理用户名是否注册

AJAX的主要特点

1.在不刷新页面的情况下，与服务器进行异步交互

2.优化浏览器与服务器的数据传输，减少了不必要的数据往返

3.把部分数据处理转移到客户端，减少服务器压力

实现AJAX的基本思路

1.选择一个js类库

2.js部分向服务器传递数据

3.php接收传递的数据，处理数据，返回js

4.js接收php的数据，并做相应的处理

AJAX基础代码

$.ajax({

            url:"loginchuli.php",    //是连接到的页面

            data:{uu:uid,pp:pwd},    //前边的uu是名字后边的uid是取到的值，前边的pp是名字后边的pwd是取到的值

            type:"POST",             //传递方式

            dataType:"TEXT",         //接受返回来的数据类型，有text/json/xml

            success:function(data){       //成功后，返回的数据，用这回调函数接受一下，data是自己定义的名称，接收回来的数据就存到data里

                alert(data);

                }
        })

例子1：ajax异步验证登录

1.登陆界面

<body>

<div>用户名：<input type="text" id="uid"/></div>

<div>密码：<input type="password" id="pwd"/></div>

<div><input type="button" id="btn" value="登录"/></div>

</body>

</html>

<script type="text/javascript">

$(document).ready(function(e) {

    $("#btn").click(function(){

        //取用户名和密码

        var uid=$("#uid").val();

        var pwd=$("#pwd").val();

        //调用ajax,里边是json数据，所以要加上{}括号

        $.ajax({

            url:"loginchuli.php",    //是连接到的页面

            data:{uu:uid,pp:pwd},    //前边的uu是名字后边的uid是取到的值，前边的pp是名字后边的pwd是取到的值

            type:"POST",             //传递方式

            dataType:"TEXT",         //接受返回来的数据类型，有text/json/xml

            success:function(data){       //成功后，返回的数据，用这回调函数接受一下，data是自己定义的名称，接收回来的数据就存到data里

                alert(data);

                if(data.trim()=="1")                      //判断返回来的数据是不是1，如果是1，让其跳转到主页面,data.trim()方法是把返回的数据去掉空格

                {

                    window.location.href="main.php";

                    }

                    else

                    {

                        alert("用户名或密码错误");

                        }

                }

            });

        })

});

2.登录处理界面

<?php

$uid=$_POST["uu"];

$pwd=$_POST["pp"];

include("DBDA.class.php");

$db=new DBDA();

$sql="select pwd from users where name='{$uid}'";    //根据用户名查询密码

$mm =$db->Query($sql);

if(!empty($pwd) && !empty($mm) && $mm[0][0]==$pwd)

{

    echo "1";

    }

    else

    {

        echo "0";

        }

例子2：ajax判断用户名是否已经注册

1.输入页面

<input type="text" id="uid" />

<span id="jia"></span>

</body>

<script type="text/javascript">

$("#uid").blur(function(){            //blur()失去焦点时间

    //取用户名

    var uid = $("#uid").val();

    //调AJAX

    $.ajax({

        url:"uidchuli.php",

        data:{u:uid},                   //传递给处理界面数据

        type:"POST",

        dataType:"TEXT",

        success: function(data){

                if(data>0)

                {

                    $("#jia").html("该用户名已存在");

                    $("#jia").css("color","red");

                }

                else

                {

                    $("#jia").html("该用户名可用");

                    $("#jia").css("color","green");

                }

            }

        });

    })

</script>

2.处理页面

<?php

$uid = $_POST["u"];

include("DBDA.class.php");

$db = new DBDA();

$sql = "select count(*) from users where uid='{$uid}'";

echo $db->StrQuery($sql);

例子3：异步搜索过滤内容数据

1.显示页面

<style type="text/css">

*{ margin:0px auto; padding:0px}

.l{ width:200px; height:30px; text-align:center; line-height:30px; vertical-align:middle; border-bottom:1px solid #C00}

</style>

</head>

<body>

<br />

<div style="width:200px; height:35px;border:2px solid #C00"><input style="width:196px; height:31px;" type="text" id="name" /></div>

<div id="list" style="width:200px;">

</div>

<script type="text/javascript">

$("#name").keyup(function(){        //特别注意keyup()方法   是当输入内容的变化时的事件

    //取名称

    var n = $(this).val();

    if(n!="")

    {

    //调AJAX

    $.ajax({

        url:"listchuli.php",

        data:{n:n},

        type:"POST",

        dataType:"TEXT",

        success: function(data){

                var sz = data.split("|");        //split()是把字符串分割成数组，是个二维数组

                var str = "";

                for(var i=0;i<sz.length;i++)

                {

                    str = str+"<div class='l'>"+sz[i]+"</div>";     //拼接div，然后扔给上面的框内

                }

                $("#list").html(str);

            }

        });

    }

    else

    {

        $("#list").html("");

    }

    })

</script>

2.处理页面

<?php

$name = $_POST["n"];

include("DBDA.class.php");

$db = new DBDA();

$sql = "select areaname from chinastates where areaname like '%{$name}%' ";

echo $db->StrQuery($sql);

AJAX部分---php-jquery-ajax；的更多相关文章

  1. MVC中使用Ajax提交数据 Jquery Ajax方法传值到action

    Jquery Ajax方法传值到action <script type="text/javascript"> $(document).ready(function(){ ...

  2. python_way day21 Django文件上传Form方式提交，原生Ajax提交字符处啊，Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式，Django验证码，抽屉示例，

    python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...

  3. Ajax/XHR/HTTP/jQuery Ajax

    Ajax即通过XHR API使用js发起的异步网络请求,它不会导致页面刷新,因此是现代Web App的关键技术. HTTP协议是Web开发中最重要的网络协议,HTTP协议详细规定了请求和响应报文. 请 ...

  4. 三、jQuery--Ajax基础--Ajax全接触--jQuery中的AJAX

    用jQuery实现Ajax jQuery.ajax([settings]) type:类型,“POST”或“GET”,默认为“GET” url:发送请求的地址 data:是一个对象,连同请求发送到服务 ...

  5. 29、Jquery Ajax

    Ajax Asynchronsous Javascript and XML(异步Javascript和XML). Ajax 是一种无需重新加载整个页面的情况下,更新局部页面的技术. 不是指一种单一的技 ...

  6. jQuery AJAX 简介

    AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. jQuery AJAX 实例 使用 jQuery AJAX 修改文本内容 尝试一下 » 什么是 AJAX? A ...

  7. 原生Ajax--XmlHttpRequest对象和jQuery.ajax()

    Ajax主要就是使用 [XmlHttpRequest]对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE) 1.XmlHttpRequest对象介绍 XmlHttpRequest对象的主要 ...

  8. Ajax-04 jQuery Ajax 常用操作

    jQuery jQuery 其实就是一个JavaScript的类库,其将复杂的功能做了上层封装,使得开发者可以在其基础上写更少的代码实现更多的功能. jQuery Ajax a.概述 jQuery 不 ...

  9. jquery ajax属性async(同步异步)示例

    在jquery的ajax中如果我们希望实现同步或者异步我们可以直接设置async发生为真或假即可true false,下面举几个jquery ajax同步和异步实例 例1.jquery+ajax/&q ...

  10. jQuery ajax - ajaxSetup() 方法

    实例 为所有 AJAX 请求设置默认 URL 和 success 函数: $("button").click(function(){ $.ajaxSetup({url:" ...

随机推荐

  1. 各版本Office办公软件下载

    各版本Office办公软件下载:http://pan.baidu.com/share/home?uk=1174874628

  2. php : mysql数据库操作类演示

    设计目标: 1,该类一实例化,就可以自动连接上mysql数据库: 2,该类可以单独去设定要使用的连接编码(set names XXX) 3,该类可以单独去设定要使用的数据库(use XXX): 4,可 ...

  3. 用Python编写的第一个回测程序

    用Python编写的第一个回测程序 2016-08-06 def savfig(figureObj, fn_prefix1='backtest8', fn_prefix2='_1_'): import ...

  4. 安卓设备通过USB接口读取UVC摄像头权限问题

    libusb for Android================== Building:--------- To build libusb for Android do the following ...

  5. 小韦XPSP3 V10.0_Ghost精简版

    小韦XPSP3 V10.0_Ghost精简版 该版本基于小韦XPSP3 V10.0,用EasySysprep_4.1进行重新封装,最大程度保持原版极度精简的理念.C盘为NTFS格式,安装后C盘只占用2 ...

  6. Python之路 day2 初识字典

    #Author:ersa ''' key-value 键值对 字典是无序的,不需要下标,有key 字典的查找.修改.添加.判断.删除 ''' info = { 'stu1101': "Ten ...

  7. lr各种问题以及解决办法

    LR 脚本为空的解决方法: 1.去掉ie设置中的第三方支持取消掉 2.在系统属性-高级-性能-数据执行保护中,添加loadrunner安装目录中的vugen.exe文件 遇到flight界面为空的解决 ...

  8. CentOS 6.x 一键安装PPTP VPN脚本

    环境 CentOS 6.x 32位/64位XEN/KVM/OpenVZ 步骤 依次运行下列命令 #wget http://www.hi-vps.com/shell/vpn_centos6.sh #ch ...

  9. MyEclipse常用设置

    中文乱码设置:1.window-->preference-->general-->content type然后在<Content Types>中展开每一颗子项,并在< ...

  10. yii2-basic后台管理功能开发之一：引入模板

    前景:哎没想到用php的yii2框架写了官网……自己选择的框架,跪着也要码完,当年用yii2-basic搭建了官网,原是想偷懒的,没想到还要写后台.... 需求:实现一个可编辑页面图片及新闻内容的后台 ...