jQuery+AJAX+PHP+MySQL开发搜索无跳转无刷新的功能-js教程-PHP中文网

jQuery+AJAX+PHP+MySQL开发搜索无跳转无刷新的功能

不言

发布： 2018-07-13 15:39:09

原创

2436人浏览过

这篇文章主要介绍了关于jquery+ajax+php+mysql开发搜索无跳转无刷新的功能，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

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

演示：

1、当表单无输入任何关键词的时候，返回"请输入关键词..."

2255025658-5b4754bdb4764_articlex[1].gif

2、当表单输入的关键词查询无果的时候，返回"无结果"

4138693906-5b47550a75499_articlex[1].gif

立即学习“PHP免费学习笔记（深入）”；

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

1682155967-5b47556cc3397_articlex[1].gif

表单页面

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>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/10209">
                            <img src="https://img.php.cn/upload/webcode/000/000/009/176111460617039.jpg" alt="ShopII电子商务社区">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/10209">ShopII电子商务社区</a>
                            <p>v1.13更新：1.增加产品讨论功能(ProductMsg备注字段)2.修正页面中的js错误数处。3.删除后的拍卖产品在回收站中统一管理。4.版面图标的DIY..自己更换,表格颜色自由调配。5.无限分类结构优化。6.产品说明支持HTML.7.网页界面优化.8.修正产品上下跳转的条数错误。9.完善邮件群发功能，可选择发送给不同类型的商城用户。10.修正拍卖信息中错误的交易完成Bug。11.去掉搜索用</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="ShopII电子商务社区">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/10209" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="ShopII电子商务社区">
                        </a>
                    </div>
                "
                                }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>
<!-- 表单 -->
    <p 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>
    </p>
    <!-- 搜索结果显示区域 -->
    <p id="search_result"></p>
</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";
?>

登录后复制

数据库结构

262472067-5b4753fa85e54_articlex[1].png

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

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

大家都在看：

JavaScript_数据库操作与ORM框架使用 JavaScript数据库操作_MongoDB与MySQL连接池优化解决AWS Lambda连接MySQL查询超时：深入理解数据库命名规范与常见陷阱 AWS Lambda 连接 MySQL 查询超时问题解析与数据库命名规范解决AWS Lambda连接MySQL查询超时问题：数据库命名规范陷阱