jQuery+AJAX+PHP+MySQL数据库开发搜索功能,无跳转无刷新搜索。

2018-07-13 admin

知识点:ajax提交表单,php查询数据库,php返回json数组,javascript遍历输出json数组

演示:

1、当表单无输入任何关键词的时候,返回**“请输入关键词…”**

图片描述

2、当表单输入的关键词查询无果的时候,返回**“无结果”**

图片描述

3、当表单输入的关键词查询有结果,则返回结果。

图片描述

表单页面

index.html

<!DOCTYPE html>
<html>
<head>    
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AJAX搜索</title>
    <style type="text/css">
        *{margin:0px;padding:0px;}
        h2{
            text-align: center;
        }

        #search_con{
            width: 300px;
            margin:10px auto;
        }

        #keywords{
            width: 300px;
            margin-top: 10px;
            height: 30px;
        }

        #btn{
            width: 305px;
            height: 35px;
            margin-top: 10px;
        }

        #search_result{
            width: 300px;
            margin:30px auto;
        }
    </style>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            $("button").click(function(){
                var inputVal = $("#keywords").val();
                $.ajax({
                    type:"GET",
                    url:"search.php?keywords=" + inputVal,
                    dataType:"json",
                    success:function(data){
                        $(function(){
                            var con="";
                            $.each(data,function(i,data){
                                if (data.result == "0") {
                                    con+="<p>请输入关键词...</p>"
                                }else if(data.result == "1"){
                                    con+="<p>无结果</p>"
                                }else{
                                    con+="<p>"+data.title+"</p>"
                                }
                            });
                                console.log(con);
                                $("#search_result").html(con);
                        })
                        return false; 
                    }
                })
            })
        })
    </script>
</head>
<body>
<!-- 表单 -->
    <div id="search_con">
    <form action="##">
        <h2>AJAX+PHP+MySQL搜索</h2>
        <input type="text" name="keywords" id="keywords" placeholder="搜索关键词..."><br/>
        <button name="button" type="button" id="btn">搜索</button>
    </form>
    </div>
    <!-- 搜索结果显示区域 -->
    <div id="search_result"></div>
</body>
</html>

服务端

search.php

<?php
header("Content-type:application/json");
//定义参数
$keywords = $_GET["keywords"];
//获取数据库配置
require_once("config.php");
//连接数据库
$con = mysql_connect($host,$username,$password);
  if (!$con)
    {
      die('连接数据库失败,失败原因:' . mysql_error());
    }
  //设置数据库字符集  
  mysql_query("SET NAMES UTF8");
  //查询数据库
  mysql_select_db($db, $con);
  //过滤关键词左右空格
  $keyword = trim($keywords);
  if (empty($keyword)) {
  //如果关键词为空,则返回result=0
  echo "[{\"result\":\"0\"}]";
    }else{
      $result = mysql_query("SELECT * FROM $tb WHERE title like '%$keyword%' ORDER BY ID DESC");
      $num = mysql_num_rows($result);
      if ($num) {
        $search_result = array();
          while($row = mysql_fetch_array($result)){
              $search_result[] = $row;
          }
          // 将数组转成json格式
          echo json_encode($search_result);

  }else{
    //如果查询无果,则返回result=1
    echo "[{\"result\":\"1\"}]";
  }
}
?>

数据库配置

config.php

<?php
//配置文件 - BY TANKING
$host="localhost";
$username="root";
$password="root";
$db="test";
$tb="datalist";
?>

数据库结构

clipboard.png

数据库名:test 表名:datalist 字段:id,title,url 字段解析: id - 自增ID title - 标题 url - 页面链接

作者:TANKING 2018-7-12

原文链接:https://segmentfault.com/a/1190000015619516

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35877.html

文章标题:jQuery+AJAX+PHP+MySQL数据库开发搜索功能,无跳转无刷新搜索。

相关文章
js实现手机拍照上传功能
在前段时间的项目开发中,用到了拍照上传的地方,后来发现了最为简单的一种方法,现总结如下: &lt;form id=&quot;form&quot; method=&quot;post&quot; action=&quot;http:&#x2...
2017-03-06
HTML5游戏2015年的开发趋势
在互联网行业中,一个行业从零到成熟,开发者生态也是对应的,我们今年看到很多大公司,包括像微软和Google,也参与到了HTML5 开发者生态的建设当中。关于HTML5移动游戏的开发和盈利生态的走向又该去往何处?下面我们来试着讨论一下。 《围...
2015-11-12
jQuery中DOM树操作之复制元素的方法
本文实例讲述了jQuery中DOM树操作之复制元素的方法。分享给大家供大家参考。具体分析如下: 复制元素 前面提到的操作包括:插人新创建的元素、将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素。可是,有时候也会用到...
2015-11-13
Html5 是否适合移动应用开发
HTML5最近这几年声誉鹊起,而基于HTML5技术的产品也风生水起。感觉现在你的产品要是不和HTML5沾点边,都不好意思和客户打招呼!移动应用开发中,HTML5更是不可或缺的角色,市面上不少移动应用中间件产品都号称支持HTML5,例如APP...
2015-11-12
2015 Web 2.0和AJAX如何做好优化
2015如何让做好web2.0和ajax的优化?JavaScript中文网总结当下提出以下四大优化意见,旨在帮助W前端开发人员有效利用APM解决上述问题。 随着Web应用程序速度与效率快速增长,网站已经成为企业与其客户进行交互的第一途径——...
2015-11-12
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
关于Ajax应用开发需要注意的事项
接触Ajax,那时候的Ajax支持还不是很好,都要涉及底层,没有现成的框架给你调用。现在把常见的问题列举如下。 [b]1、编码问题[/b] 注意AJAX要取的文件是UTF-8编码的。GB2312编码传回BROWSE后中文会乱码。如果用VBS...
2015-11-11
jQuery的一些技巧大放送
1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。 2、jQuery对象与d...
2015-11-11
HTML5移动应用开发的12大特性
1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构,可以将数据写入到本机的ROM中,还可以在关闭浏览器后再次打开时恢复数据,以减少...
2015-11-11
js实现文字向上轮播功能
话不多说,请看实现代码: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt;...
2017-03-10
回到顶部