AJAX部分---php-jquery-ajax;

Posted 业务高于技术

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AJAX部分---php-jquery-ajax;相关的知识,希望对你有一定的参考价值。

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;的主要内容,如果未能解决你的问题,请参考以下文章

根据 ajax 请求渲染多个刀片视图部分

Ajax部分

ajax.beginform - OnFailure 不返回部分视图

如何使用ajax加载部分

AJAX部分加载后的Vue绑定?

ajax 选择 HTML 的特定部分