zoukankan      html  css  js  c++  java

  • ajax基础语法、ajax做登录、ajax做用户名验证是否可用、ajax做关键字查询动态显示、ajax做用表格显示数据并增加操作列

    AJAX：

    AJAX 是一种用于创建快速动态网页的技术。
    通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
     

    如果此页面用到了ajax方法，一定要在页面上端加上：

    <script src="../../jquery-1.11.2.min.js"></script>

    ajax基础语法：

    <script type="text/javascript">
    $.ajax({
        url:"chuli.php", //处理页面地址
        data:{code:"n001"},//传递的数据，提交数据
        type:"POST", //提交方式，一般用POST，大写
        dataType:"TEXT", //返回值的类型，TEXT要大写
        success:function(data){ //回调函数
                alert(data);//输出返回的值
            },
        error:function(){  //处理出错执行
            
            }
        
        });
</script>

    ajax做登录：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../jquery-1.11.2.min.js"></script>
<title>无标题文档</title>
</head>

<body>
<div>用户名：<input type="text" id="uid" /></div>
<div>密码：<input type="text" id="pwd" /></div>
<div><input type="button" value="登录" id="btn" /></div>
</body>
    <script type="text/javascript">

$(document).ready(function(e) {
    $("#btn").click(function(){
        
        //取用户名和密码
        var u = $("#uid").val();
        var p = $("#pwd").val();
        
        //调AJAX
        $.ajax({
            url:"dlchuli.php",
            data:{u:u,p:p},
            type:"POST",
            dataType:"TEXT",
            success: function(data){
                    if(data.trim()=="OK")
                    {
                        window.location.href="main.php";
                    }
                    else
                    {
                        alert("用户名或密码有误");
                    }
                }
            
            });
        
        })
});

</script>
</html>
    <?php
$uid = $_POST["u"];
$pwd = $_POST["p"];

include("../DBDA.class.php");
$db = new DBDA();

$sql = "select pwd from users where uid='{$uid}'";

$mm = $db->StrQuery($sql);

if($mm == $pwd && $pwd!="")
{
    echo "OK";
}
else
{
    echo "NO";
}

    ajax用户名验证

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../jquery-1.11.2.min.js"></script>
<title>无标题文档</title>
</head>

<body>

<input type="text" id="uid" />
<span id="ts"></span>

</body>
    <script type="text/javascript">

$("#uid").blur(function(){
    
    //取用户名
    var uid = $("#uid").val();
    
    //调AJAX
    $.ajax({
        url:"uidchuli.php",
        data:{u:uid},
        type:"POST",
        dataType:"TEXT",
        success: function(data){
                if(data>0)
                {
                    $("#ts").html("该用户名已存在");
                    $("#ts").css("color","red");    
                }
                else
                {
                    $("#ts").html("该用户名可用");
                    $("#ts").css("color","green");
                }
            }
        });
    
    })

</script>
</html>
    <?php
$uid = $_POST["u"];

include("../DBDA.class.php");
$db = new DBDA();

$sql = "select count(*) from users where uid='{$uid}'";

echo $db->StrQuery($sql);

    ajax做关键字查询动态显示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../jquery-1.11.2.min.js"></script>
<title>无标题文档</title>
<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 #60F}
</style>
</head>

<body>

<br />

<div style="200px; height:35px;border:2px solid #60F"><input style="196px; height:31px;" type="text" id="name" /></div>

<div id="list" style="200px; height:500px; border:2px solid #60F">
    
</div>
    <script type="text/javascript">

$("#name").keyup(function(){
    //取名称
    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("|");
                
                var str = "";
                
                for(var i=0;i<sz.length;i++)
                {
                    str = str+"<div class='l'>"+sz[i]+"</div>";
                }
                
                $("#list").html(str);
            }
        
        });
    }
    else
    {
        $("#list").html("");
    }
    
    })

</script>
</body>
</html>
    <?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做用表格显示数据并增加操作列（删除）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../jquery-1.11.2.min.js"></script>
<title>无标题文档</title>
</head>

<body>
<input type="button" value="显示" id="btn" />

<table width="100%" border="1" cellpadding="0" cellspacing="0">
     <tr id="sj">
        <td>代号</td>
        <td>名称</td>
        <td>操作</td>

    </tr>
    
 <tbody id="tb"></tbody>
    
    
</table>

    异步处理解决：1.变同步  2.放到执行返回值时的代码里面

    <script type="text/javascript">

$("#btn").click(function(){
    
    $.ajax({
            url:"nationchuli.php",
            dataType:"TEXT",
            success: function(data){
                    var hang = data.split("|");
                    var str = "";
                    
                    for(var i=0;i<hang.length;i++)
                    {
                        var lie = hang[i].split("^");
                        str = str+"<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td><span class='sc' bs='"+lie[0]+"'>删除</span></td></tr>";
                        
                    }
                
                    $("#tb").html(str);
                    
                    //加事件
                    $(".sc").click(function(){
                        alert("aa");
                        })
                }
        });
        
        
    
    
    })
</script>

</body>
</html>
    <?php
include("../DBDA.class.php");
$db = new DBDA();

$sql = "select * from nation";

echo $db->StrQuery($sql);
  • 相关阅读:
    PHP数组的升序降序函数
    overflow样式修改插件——jscrollpane
    li标签之间的空隙问题（转）
    纯CSS制作三角（转）
    图片放大插件——elevatezoom
    git常用命令笔记
    求数组子序列和最大值
    Vim快速入门
    C++求两个整数的最大公约数和最小公倍数
    实验楼-4-Linux文件权限
  • 原文地址：https://www.cnblogs.com/u1020641/p/6053120.html
Copyright © 2011-2022 走看看