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

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

演示:

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

jQuery+AJAX+PHP+MySQL数据库开发搜索功能,无跳转无刷新搜索。_第1张图片

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

jQuery+AJAX+PHP+MySQL数据库开发搜索功能,无跳转无刷新搜索。_第2张图片

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

jQuery+AJAX+PHP+MySQL数据库开发搜索功能,无跳转无刷新搜索。_第3张图片

表单页面

index.html



    
    
    
    AJAX搜索
    
    
    



    

AJAX+PHP+MySQL搜索


服务端

search.php

数据库配置

config.php


数据库结构

jQuery+AJAX+PHP+MySQL数据库开发搜索功能,无跳转无刷新搜索。_第4张图片

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

作者:TANKING
2018-7-12

你可能感兴趣的:(jQuery+AJAX+PHP+MySQL数据库开发搜索功能,无跳转无刷新搜索。)