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. Open source packages on Deep Reinforcement Learning

    智能车 self driving car + 强化学习 reinforcement learning + 神经网络 模拟 https://github.com/MorvanZhou/my_resear ...

  2. python走起之第二话

    Python基础 一.整数(int) 如: 18.73.84 整数类的功能方法及举例: 带__的方法代表有多种表达方式 1.__abs__ <==> abs() 求整数的绝对值:(-11) ...

  3. 《BI那点儿事》数据流转换——聚合

    聚合转换可以像T-SQL中的函数GROUP BY, Average, Minimum, Maximum, 和 Count一样对数据进行聚合运算.在图中可以看到数据以SampleID分组,对TotalS ...

  4. Deep Learning 7_深度学习UFLDL教程：Self-Taught Learning_Exercise（斯坦福大学深度学习教程）

    前言 理论知识:自我学习 练习环境:win7, matlab2015b,16G内存,2T硬盘 练习内容及步骤:Exercise:Self-Taught Learning.具体如下: 一是用29404个 ...

  5. 转<%%>、<%=%>、<%$%>、<%@%>的区别

    1. 未定义的命名空间前缀“xsd” 上周在项目开发中遇到这样的一个问题,在一个页面用到了自定义的Picker控件,在IE6.7.8.9以及IE10兼容模式下都没有任何问题,但是一换到IE10时已选择 ...

  6. （转）js activexobject调用客户机exe文件

    原文地址:http://blog.csdn.net/jiafugui/article/details/5364210 function Run(strPath) { try { var objShel ...

  7. D:Balanced Lineup

    总时间限制: 5000ms 内存限制: 65536kB描述For the daily milking, Farmer John's N cows (1 ≤ N ≤ 50,000) always lin ...

  8. Icon资源详解[2]

    本文分享&备忘最近了解到的icon资源在windows平台下相关的一部分知识.所有测试代码都尽可能的依赖win32 API实现.通过源码可以了解其结构,同时它们也是可复用的代码积累.     ...

  9. adb error: device not found

    我的adt无法调试一个平板,我的手机却能调试,百度了好多次,折腾了两个周,换了几个版本的adt,都不成. 就在刚才,我在设备管理器找到那个设备Samsung xxx,点更新驱动,自动搜索,那个设备就变 ...

  10. SSH框架构建微信公众帐号服务器小技巧

    SSH框架构建微信公众帐号服务器小技巧 熟悉struts2和servlet的同学应该清楚,struts2的方法多样性弥补了servlet单一的doGet 和doPost方法.如果自己的公众账号服务器是 ...