使用AJAX做关键字查询
要求：1.无刷新页面2.输入框变化自动搜索

<style type="text/css">
.k{ width:150px; height:30px; border-bottom:1px solid #09F; text-align:center; line-height:30px; vertical-align:middle}

</style>
</head>

<body>
<table width="60%" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td>代号</td>
        <td>民族</td>
    </tr>
    <tbody id="tb"></tbody>
</table>
<div style="width:300px"><input type="text" id="name" />
<input type="button" value="查询" id="cx" />
</div>
<div id="list" style=" width:150px; height:300px; border:1px solid #06F">

</div>
</body>
<script type="text/javascript">
//输入关键字，输入框变化，自动搜索
$("#name").keyup(function(){
    var v = $(this).val();
if(v!="")//如果v不等于空走ajax,如果为空,输出的html也为空
{
    $.ajax({
        url:"ajax71cl.php",
        data:{v:v},
        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 = 'k'>"+sz[i]+"</div>";
                }
                    $("#list").html(str);
            }
        })
}
else
{
    $("#list").html("");
}
    })
//文本框输入关键字点击查询
$("#cx").click(function(){
    var n = $("#name").val();
    $.ajax({
        url:"ajax7cl.php",
        data:{n:n},
        type:"POST",
        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></tr>";
                }
                $("#tb").html(str);
            }
        })
    })
</script>

关键字查询处理页面:

<?php
include("../fzl/czy.class.php");
$db = new czy();
$name = $_POST["n"];
$sql = "select * from nation where name like '%{$name}%'";
echo  $db->strQuery($sql);
输入框变化自动搜索处理页面：
<?php
include("../fzl/czy.class.php");
$db = new czy();
$v = $_POST["v"];
$sql = "select name from nation where name like '%{$v}%'";
echo $db->strQuery($sql);
 


使用AJAX做关键字查询：输入框变化自动搜索、无刷新页面;的更多相关文章

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

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

  2. AJAX JQuery 调用后台方法返回值（不刷新页面）

    AJAX JQuery 调用后台方法返回值(不刷新页面) (1)无参数返回值(本人亲试返回结果不是预期结果) javascript方法: $(function () {             //无 ...

  3. JSF中使用f:ajax标签无刷新页面改变数据

    ajax本是用在前端的一种异步请求数据的操作,广泛用于js中,一般的js框架如jq都有被封装好的方法,用于发起异步请求操作.异步操作可以增强用户体验和操作,越来越多的程序都在使用ajax.JSF的fa ...

  4. Ajax 实现无刷新页面

    注意:如本文所用,在前面的文章库的数目可以在源代码中找到,我将指示在文本,其中链路,为了缩短制品的长度,阅读由此带来的不便.乞求被原谅. 评论文章 Ajax 实现无刷新页面.其原理.代码库.代码. 这 ...

  5. PHP + JavaScript + Ajax 实现无刷新页面加载效果

    数据源工厂 Json生成方式1 Json生成方式2 数据搬运工 数据加工师 转换类型 加工展示 结果展示 初始页面 点击按钮之后 总结 今天这个实验的思路就是实现一个无刷新的页面加载效果.具体的思路是 ...

  6. ajax 无刷新页面登录

    1:页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  7. ajax分页2：jquery.pagination +JSON 动态无刷新分页

    静态页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  8. 鼠标聚焦到Text输入框时，按回车键刷新页面原因及解决方法

    前提 一个form中只有一个输入框,当输入框获取焦点后,点击回车,导致整个页面都刷新,问题解决办法. 1.处理form  在form中添加事件 <form onsubmit="retu ...

  9. 使用Ajax无刷新页面登录

    <script> window.onload = function () { var myname = document.getElementById("uname") ...

随机推荐

  1. poj 2378(树形dp)

    题目链接:http://poj.org/problem?id=2378 思路:num[u]表示以u为根的子树的顶点个数(包括),如果去掉u之后u的每棵子树都小于等于n/2,则选择u. #include ...

  2. sql 遍历结果print和表格形式

    select * from tb_province --省 pID pName1 北京市2 天津市3 上海市4 重庆市5 河北省6 山西省....... select * from tb_city - ...

  3. js:数据结构笔记14--高级算法

    动态规划: 递归是从顶部开始将问题分解,通过解决所有分解出小问题来解决整体问题: 动态规划从底部开始解决问题,将所有小问题解决,然后合并掉一个整体解决方案: function dynFib(n) { ...

  4. MAXIMO移动解决方案在库存管理中的PDA应用系统

    随着无线网络通信技术.掌上电脑技术以及条形码自动识别技术的推广使用,为了强化MAXIMO系统库存管理的功能,着手开发MAXIMO移动应用解决方案. 该解决方案集成了无线局域网络通信.掌上电脑以及条形码 ...

  5. ZOJ1654 Place the Robots（二分图最大匹配）

    最大匹配也叫最大边独立集,就是无向图中能取出两两不相邻的边的最大集合. 二分图最大匹配可以用最大流来解. 如果题目没有墙,那就是一道经典的二分图最大匹配问题: 把地图上的行和列分别作为点的X部和Y部, ...

  6. POJ2288 Islands and Bridges（TSP：状压DP）

    求一个图的哈密顿路径的最大权及其路径数.显然状态压缩+DP. dp[v][u][S] 表示从v走到当前顶点 u且走过的顶点集合是S的 最大权值和方案数 这题我用记忆化搜索,从终点开始递归进行,感觉这样 ...

  7. jQuery 写的幻灯左右切换插件

    <html> <head> <meta charset="utf-8"> <title>官网</title> <s ...

  8. JS中的闭包的一些理解！

    在日常的开发中,基本上是不会遇到关于闭包的这样,但是,因为在一些特殊的情况下,必须采用闭包,所以这里简单的概述下什么是闭包: OK!简而言之,闭包只是一个名词而已,我们更注重于他所实现的功能,也就是我 ...

  9. QAction QActionGroup QMenu 使用方法

    在Qt中,QAction,QActionGroup 和 QMenu类用用来操作软件的菜单栏的,比如很多软件都有文件菜单,里面有打开,保存,另存为之类的选项,在Qt中就是通过这几个类来实现的.或者是在菜 ...

  10. java.lang.String 类的所有方法

    java.lang.String 类的所有方法 方法摘要 char charAt(int index) 返回指定索引处的 char 值. int codePointAt(int index) 返回指定 ...