碼上快樂

相關內容    簡體    繁體

AJAX基本操作 + 登錄 + 刪除 + 模糊查詢

本文轉載自   查看原文   2016-11-11 00:19   2730 

 

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>

<script type="text/javascript"> $.ajax({ url:"lianxi_chuli.php",//url處理頁面的地址
        data:{code:"n001"},//data傳遞的數據:"提交的數據"
        type:"POST",//POST的提交方式
        dataType:"TEXT",//返回值的類型，還有XML ,和JSON類型
        success:function(data){//先執行到提交方式，跳到處理頁面訪問到數據庫找到這個值的條件后返回TEXT值的類型，進去循環，毀掉函數。
 alert(data); }, errof:function(){//處理出錯執行
 }, }); </script>

</body>
</html>

 

 

 

AJAX練習處理頁面

 

<?php $code = $_POST["code"];//同樣用POST提交方式接收要查詢的列
 include("../DBDA.class.php");//引用封裝好的類
$db = new DBDA();  //造連接對象
 $sql = "select name from nation where code='{$code}'";//根據提供的【n001】值找想要找的【漢族】內容
 echo $db->StrQuery($sql);//$db用返回字符串StrQuery方式，執行$sql,echo輸出
?>

 

效果圖

 

 

 

 

 

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>
<!--關鍵語句：window.location.href="要跳轉到那個頁面"-->
<!--關鍵字： .trim去空格-->
<!--寫代碼是注意事項！代碼一定認真寫，有時候少了個字母，或寫錯代碼，或忘記$符號！！！-->
<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:"DL_chuli.php",//url跳轉處理頁面
            data:{u:u,p:p},//data:{用戶輸的名 : 數據庫傳來的值 , 用戶輸入的密碼 : 數據庫輸出的值}，
            type:"POST",//用POST提交的方式
            dataType:"TEXT",//返回值的類型，還有XML ,和JSON類型
 success:function(data){ if(data.trim()=="OK"){//進循環if判斷用戶輸入正確執行跳轉主頁面
                    window.location.href="zhuyemian.php"; }else{ alert("用戶名或密碼有誤"); } }, }); }) }); </script>
</html>

 

ajax登錄處理頁面

 

<?php $uid = $_POST["u"];//同樣用POST提交方式接收用戶輸的用戶名
$pwd = $_POST["p"];//同樣用POST提交方式接收用戶輸的密碼
 include("../DBDA.class.php");//引用封裝好的類
$db = new DBDA();//造連接對象
 $sql = "select nation from info where name='{$uid}'";//根據客戶輸入的uid用戶名找相應的密碼
$mm = $db->StrQuery($sql);  //$db用返回字符串StrQuery方式，執行$sql,$mm接收
if($mm == $pwd && $pwd!=""){ echo "OK";//一致就輸出ok
    }else{ echo "NO";//錯誤就輸出on
 } ?>

 

簡單的登錄頁面效果圖

 

 

 

 

 

  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:"ceshi_chuli.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>

 

  ajax登錄判斷處理頁面

 

<?php $uid = $_POST["u"]; include("../DBDA.class.php"); $db = new DBDA(); $sql = "select count(*) from login where name='{$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>
</head>

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

<table width="100%" border="1" cellpadding="0" cellspacing="0">

<tr id="sj">
<tr>代號</tr>
<td>名稱</td>
<td>操作</td>
</tr>

<tbody id="td">
</tbody>
</table>

<script type="text/javascript"> $("#btn").click(function(){ $.ajax({ url:"caozuo_chuli.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>"; } $("#td").html(str); //加事件
                $(".sc").click(function(){ alert("aa"); }) } }); }) </script>

</body>
</html>

 

ajax操作刪除處理頁面

 

<?php include("../DBDA.class.php"); $db = new DBDA(); $sql = "select * from nation"; echo $db->StrQuery($sql); ?>

 

 

點擊刪除跳出個aa

 

 

 

 

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>
<br />

<body>
<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>

</body>
<script type="text/javascript"> $("#name").keyup(function(){ //取名稱
    var n = $(this).val(); if(n!=""){//判斷輸入框里是否為空 //調AJAX
 $.ajax({ url:"mohu_chuli.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>
</html>

 

 

ajax模糊查詢

 

<?php $name = $_POST["n"]; include("../DBDA.class.php"); $db = new DBDA(); $sql = "select areaname from chinastates where areaname like'%{$name}%'"; echo $db->StrQuery($sql); ?>

 

 

模糊查詢效果圖

 

 

 

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Redis 模糊查詢刪除操作 redis 模糊查詢，批量刪除 Dapper like操作 模糊查詢 MySQL全面瓦解6：查詢的基本操作 elasticsearch基本操作之--使用QueryBuilders進行查詢 PHP對於數據庫的基本操作——查詢 elasticsearch基本操作之--使用QueryBuilders進行查詢 where子句之模糊查詢操作符 Elasticsearch-Java API操作（一）API基本操作（4）【刪除索引】 Mongodb 級聯刪除查詢操作
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM