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. Java中的static关键字解析 转载

    原文链接:http://www.cnblogs.com/dolphin0520/p/3799052.html Java中的static关键字解析 static关键字是很多朋友在编写代码和阅读代码时碰到 ...

  2. 深入浅出设计模式——享元模式（Flyweight Pattern）

    模式动机 面向对象技术可以很好地解决一些灵活性或可扩展性问题,但在很多情况下需要在系统中增加类和对象的个数.当对象数量太多时,将导致运行代价过高,带来性能下降等问题.享元模式正是为解决这一类问题而诞生 ...

  3. [luogu2982][USACO10FEB]慢下来Slowing down(树状数组+dfs序)

    题目描述 Every day each of Farmer John's N (1 <= N <= 100,000) cows conveniently numbered 1..N mov ...

  4. c++ *.h和*.cpp在编译中的作用

    首先,我们可以将所有东西都放在一个.cpp文件内.然后编译器就将这个.cpp编译成.obj,obj是什么东西?就是编译单元了. 一个程序,可以由一个编译单元组成,也可以有多个编译单元组成. 如果你不想 ...

  5. D3.js 更自由的条形图

    一.添加一个矩形 //Width and height var w = 500; var h = 100; var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, ...

  6. linux笔记：shell基础-概述和脚本执行方式

    什么是shell: linux使用的默认shell是Bash: shell脚本的后缀名为.sh,shell脚本的第一行#!/bin/bash 不是注释,而是标识这是一个shell脚本,因为linux并 ...

  7. SpringMVC -- 梗概--壹

    1.springMVC:MVC开源框架 2.springMVC开发流程: 2.1 导包: 2.2 配置前端控制器(核心) DispatcherServlet <servlet> <s ...

  8. Linux编程之驱动

    增加自己写的驱动程序:http://blog.chinaunix.net/uid-23065002-id-115739.html http://os.51cto.com/art/201108/2840 ...

  9. OPENGL学习之路（0）--安装

    此次实验目的: 安装并且配置环境. 1 下载 https://www.opengl.org/ https://www.opengl.org/wiki/Getting_Started#Downloadi ...

  10. Js获取后台集合List的值和下标的方法

    Js获取后台集合List的值和下标的方法 转载自:http://blog.csdn.net/XiaoKanZheShiJie/article/details/47280449 首先用的是struts2 ...