Chinaunix首页 | 论坛 | 博客
  • 博客访问: 18069
  • 博文数量: 21
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 223
  • 用 户 组: 普通用户
  • 注册时间: 2020-07-01 21:01
个人简介

青岛风月网www.qdspaw.com,男士减压休闲养生体验平台。

文章分类
文章存档

2020年(21)

我的朋友

分类: PHP

2020-07-03 23:02:49

往往我们在实际的PHP代码开发过程中,就会遇到一系列的问题,随着青岛风月网的代码优化,调整了Ajax模式的调整,尝试着用PHP结合AJAX实现搜索提示功能首先将创建一个输入框;然后监听输入框的keyup事件,当事件触发时,使用AJAX请求将输入的内容发送给PHP;接着PHP根据输入的内容进行数据查找并返回;最后将返回的数据进行渲染即可。

点击(此处)折叠或打开

  1. <html>
  2.  <head>
  3.   <script> $(document).ready(function(){ var xhr=null; $('input[name="keyword"]').keyup(function() { if(xhr){ xhr.abort();//如果存在ajax的请求,就放弃请求 } var inputText= $.trim(this.value); if(inputText!=""){//检测键盘输入的内容是否为空,为空就不发出请求 xhr=$.ajax({ type: 'GET', url: 'service/suggestion.php', cache:false,//不从浏览器缓存中加载请求信息 data: "keyword=" + inputText,//向服务器端发送的数据 dataType: 'json',//服务器返回数据的类型为json success: function (json) { if (json.length != 0) {//检测返回的结果是否为空 var lists = "
      "; $.each(json, function () { lists += "
    • "+this.pd_name+"
    • "
      ;//遍历出每一条返回的数据 }); lists+="
    "
    ; $("#searchBox").html(lists).show();//将搜索到的结果展示出来 $("li").click(function(){ $("#keyword").val($(this).text());//点击某个li就会获取当前的值 $("#searchBox").hide(); }) } else { $("#searchBox").hide(); } } }); }else{ $("#searchBox").hide();//没有查询结果就隐藏搜索框 } }).blur(function(){ $("#searchBox").hide();//输入框失去焦点的时候就隐藏搜索框 }); }); </script>
  4.  </head>
  5.  <body></body>
  6. </html>
利用到了这样的优化模式,就能很大程度上面节省时间,http://www.qdspaw.com里面所讲到的并且做好调整优化的技巧模式。
阅读(12084) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~