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. jquery总结01-基本概念和选择器

    dom元素和jquery元素的区别 dom元素支持dom元素自带的属性和方法,jquery元素支持jquery元素自带的属性和方法 dom                  var div = doc ...

  2. C#相等性比较

    本文阐述C#中相等性比较,其中主要集中在下面两个方面 ==和!=运算符,什么时候它们可以用于相等性比较,什么时候它们不适用,如果不使用,那么它们的替代方式是什么? 什么时候,需要自定一个类型的相等性比 ...

  3. Windows 数据类型

    类型 定义 描述 ATOM typedef WORD ATOM; 原子(原子表中的一个字符串的参考) BOOL typedef int BOOL; 布尔变量 BOOLEAN typedef BYTE ...

  4. Server asks us to fall back to SIMPLE auth, but this client is configured to only allow secure connections.

    我是在flume向hdfs 写(sink)数据时遇到的这个错误. Server (是指hdfs) asks us to fall back to SIMPLE auth, but this clien ...

  5. js 监听窗口变化

    window.onresize = function () {.....}jquery $(window).resize(function)

  6. 【bzoj1084】最大子矩阵

    题意 这里有一个n*m的矩阵,请你选出其中k个子矩阵,使得这个k个子矩阵分值之和最大.注意:选出的k个子矩阵不能相互重叠. \(1≤n≤100,1≤m≤2,1≤k≤10\) 分析 由于\(m\)只有两 ...

  7. Google Analytics与百度统计原理

    Google Analytics与百度统计的统计数据都是有差异的,而且差异非常大,其根本原因在于数据统计的原理和机制是不同的.下面分享一下两位博友李鑫和赵高欣对Google Analytics与百度统 ...

  8. 三种JS方法确定元素在数组中的索引值

    第一种:数组遍历 function search(arr,dst){ var i = arr.length; while(i-=1){ if (arr[i] == dst){ return i; } ...

  9. oracle PROCEDURE AS IS区别

    在存储过程(PROCEDURE)和函数(FUNCTION)中没有区别,在视图(VIEW)中只能用 ,在游标(CURSOR)中只能用IS不能用AS.

  10. s:iterator间接实现跳出循环

    在用s:iterator遍历小组成员时需要过滤出管理员,然后在找到第一个管理员以后停止循环,下面是我的代码: <s:set name="index" value=" ...