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

Posted 2020-08-19 亮瞎我的猫眼。

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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="width:200px; height:35px;border:2px solid #60F"><input style="width:196px; height:31px;" type="text" id="name" /></div>

<div id="list" style="width: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);

以上是关于ajax基础语法ajax做登录ajax做用户名验证是否可用ajax做关键字查询动态显示ajax做用表格显示数据并增加操作列的主要内容，如果未能解决你的问题，请参考以下文章

11月10日上午ajax基础知识用ajax做登录页面用ajax验证用户名是否可用ajax动态调用数据库

使用PHP中的ajax做登录页面验证用户名是否可用动态调用数据库

一个小时，带你玩转前端交互,零基础入门做登录界面

使用 php 和 ajax 进行登录表单验证