【前端开发实例】Ajax - 实时动态查询 -(八)
2018-01-20 19:48
543 查看
Question. 问题
在输入框中输入首字母、部分内容,不需要按确认搜索就反馈给用户相关搜索结果,供用户进一步选择或者参考输入,对于用户的友好性是非常巨大的,关键字搜索、地名搜索、文章检索,都会有这样的需求,而对于前端页面而言,在页面初始化就将数据读取到 DOM 文档中的方式显然是不可行的,这时候我们就需要用 Ajax 无刷新异步获取数据的方式进行处理。Solution. 解决
HTML 部分:<h4>请在下面的输入框中键入字母(A - Z):</h4> <form action=""> 姓氏: <input type="text" id="txt" onkeyup="showHint(this.value)" /> </form> <p>建议:<span id="txtHint"></span></p>
HTML 部分主要是提供给用户一个输入框,并绑定用户有按键输入操作的时候,触发绑定 Ajax 查询,并提供一个查询结果显示区域。
JS 部分:
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function showHint(value) { $.ajax({ url: "ajax.php", type: "POST", datatype: "json", data: { val: value }, beforeSend: function(XMLHttpRequest) { console.log(XMLHttpRequest); }, success: function(data) { $('#txtHint').html(data); }, error: function() { alert('error'); } }); } </script>
JS 部分主要引入 jquery 框架,使用框架封装好的 ajax 方法,向 ajax.php 后台要查询数据。
PHP 部分:
<?php // 数据源 $name = array("Anna", "Brittany", "Cinderella", "Diana", "Eva", "Fiona", "Gunda", "Hege", "Inga", "Johanna", "Kitty", "Linda", "Nina", "Ophelia", "Petunia", "Amanda", "Raquel", "Cindy", "Doris", "Eve", "Evita", "Sunniva", "Tove", "Unni", "Violet", "Liza", "Elizabeth", "Ellen", "Wenche", "Vicky"); //获取 ajax 传递的参数 extract ( $_POST ); //如果有传入值,则查找数组中的所有提示 $hint=""; if (strlen($val) > 0) { for($i=0; $i<count($name); $i++) { if (strtolower($val)==strtolower(substr($name[$i],0,strlen($val)))) { if ($hint=="") { $hint=$name[$i]; } else { $hint=$hint." , ".$name[$i]; } } } } // 如果未找到提示,则把输出设置为 "no suggestion" // 否则设置为正确的值 if ($hint == "") { $response="no suggestion"; } else { $response=$hint; } //输出响应 echo $response;
PHP 部分主要完成根据用户的输入进行查询的业务逻辑处理。这里数据源是一个数组,在实际开发过程中,原始数据是存储在数据库中,可以通过预处理将数据存储到文件中,以减少查询耗时,使得在数据量较大的情况下,用户也能快速获得反馈。
Effection. 效果
相关文章推荐
- 通过Ajax+jquery实现的动态增加一组查询条件的实例
- AJAX实例之股票实时信息显示
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
- 动态绘圆根据接收数据实时显示_在后台绘图显示实例
- Android开发练习作业:纸黄金白银实时价格查询App
- IBatisNet/IBatis动态条件查询XMl映射配置终极解决方案实例
- 前端新手——适配不同手机端页面的方案,动态查询dpr设置根元素font-size
- 解析ASP.NET Mvc开发之查询数据实例 分类: ASP.NET 2014-01-02 01:27 5788人阅读 评论(3) 收藏
- web前端开发JQuery常用实例代码片段(50个)
- 面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序
- 前端开发必备工具:WhatFont Bookmarklet-方便的查询网页上的字体
- WebService学习------小实例开发(号码归属地查询)
- 前端开发响应式设计之媒体查询(bootstrap)
- Ajax实例练习--股票动态更新面板
- web前端 ajax加载动态生成复选框demo
- 面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序
- 初识vb数据库开发之实例5(数据查询)
- Ajax的async属性(通过ajax请求分页查询实例)
- Ajax简要应用说明及技术开发实例
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中(ZT)