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. 凯撒密码加密C语言简单实现

    凯撒加密(Julius Caesar)该方法把一条消息中的每个字母用字母表中固定距离之后的那个字母代替.(如果超越了字母Z,会绕道字母表的起始位置.例如,如果每个字母都用字母表中两个位置之后的字母代替 ...

  2. osg渲染数据高程文件

    使用gdal解析DEM文件,将高程数据转换为HeightField对象,然后在osg渲染. 1 源代码 #include <gdal_priv.h> #include <osgVie ...

  3. Material Design风格的水波涟漪效果（Ripple Effect）的实现

    Material Design是Google在2014年Google I/O大会上推出的一套全新的设计语言,经过接近两年的发展,可谓是以燎原之势影响着整个设计交互生态,和Material Design ...

  4. 你真的会写单例模式吗-------Java实现

    转载: 你真的会写单例模式吗--Java实现 单例模式可能是代码最少的模式了,但是少不一定意味着简单,想要用好.用对单例模式,还真得费一番脑筋.本文对Java中常见的单例模式写法做了一个总结,如有错漏 ...

  5. 使用ajax异步提交表单数据（史上最完整的版本）

    额 为啥用这个 不用form呢,因为这个效率高,而且在浏览器中运行程序的时候如果出现bug的话,页面不会显示显示错误信息,提高了用户的体验度. 那么,就来看看把,先给数据库表截个图哈 然后写项目被 我 ...

  6. AC自动机最好讲解

    http://www.cs.uku.fi/~kilpelai/BSA05/lectures/slides04.pdf

  7. maven设置

    <localRepository>D:/apps/eclipse/env/maven/repository</localRepository>

  8. [转]c++类的构造函数详解

    c++构造函数的知识在各种c++教材上已有介绍,不过初学者往往不太注意观察和总结其中各种构造函数的特点和用法,故在此我根据自己的c++编程经验总结了一下c++中各种构造函数的特点,并附上例子,希望对初 ...

  9. iOS开发拓展篇—音频处理（音乐播放器4）

    iOS开发拓展篇—音频处理(音乐播放器4) 说明:该文主要介绍音乐播放器实现过程中的一些细节控制. 实现的效果: 一.完整的代码 YYPlayingViewController.m文件 // // Y ...

  10. POJ 3041 Asteroids 匈牙利算法,最大流解法,行列为点 难度:1

    http://poj.org/problem?id=3041 #include <cstdio> #include <cstring> #include <vector& ...