微信小程序开发搜索功能(前端+后端+数据库)
[图片] 超级简单的界面,表单,提交按钮,搜索结果展示区域... 下面是index.wxml [代码]<!--index.wxml-->[代码][代码]<[代码][代码]form[代码] [代码]bindsubmit[代码][代码]=[代码][代码]"formSubmit"[代码][代码]>[代码][代码]<!--提交按钮 -->[代码][代码]<[代码][代码]input[代码] [代码]type[代码][代码]=[代码][代码]"text"[代码] [代码]name[代码][代码]=[代码][代码]"id"[代码] [代码]placeholder[代码][代码]=[代码][代码]'输入关键词'[代码] [代码]style[代码][代码]=[代码][代码]'border:1px solid #ccc;height:30px;'[代码][代码]/>[代码][代码]<[代码][代码]button[代码] [代码]formType[代码][代码]=[代码][代码]"submit"[代码] [代码]class[代码][代码]=[代码][代码]"btn"[代码][代码]>搜索</[代码][代码]button[代码][代码]> [代码][代码]</[代码][代码]form[代码][代码]>[代码][代码]<[代码][代码]view[代码][代码]>搜索结果</[代码][代码]view[代码][代码]>[代码][代码]<[代码][代码]view[代码] [代码]wx:for[代码][代码]=[代码][代码]"{{re}}"[代码] [代码]wx:key[代码][代码]=[代码][代码]"re"[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]view[代码] [代码]style[代码][代码]=[代码][代码]'color:#f00;'[代码][代码]>{{item.result}}</[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]view[代码] [代码]style[代码][代码]=[代码][代码]'color:green;'[代码][代码]>{{item.title}}</[代码][代码]view[代码][代码]>[代码][代码]</[代码][代码]view[代码][代码]>[代码] *跟前端差不多,form表单要加一个bindsubmit="formSubmit" 接着就是index.js [代码]//index.js[代码][代码]//获取应用实例[代码][代码]const app = getApp()[代码][代码]Page({[代码][代码] [代码][代码]/**[代码][代码] [代码][代码]* 页面的初始数据[代码][代码] [代码][代码]*/[代码][代码] [代码][代码]data: {[代码][代码] [代码][代码]result:[代码][代码]''[代码][代码],[代码][代码] [代码][代码]state:[代码][代码]''[代码][代码] [代码][代码]},[代码][代码] [代码][代码]formSubmit: [代码][代码]function[代码] [代码](e) {[代码][代码] [代码][代码]var[代码] [代码]that = [代码][代码]this[代码][代码];[代码][代码] [代码][代码]var[代码] [代码]formData = e.detail.value.id; [代码][代码]//获取表单所有name=id的值 [代码][代码] [代码][代码]wx.request({[代码][代码] [代码][代码]url: [代码][代码]'http://localhost/2018-5-24/search.php?id='[代码] [代码]+ formData,[代码][代码] [代码][代码]data: formData,[代码][代码] [代码][代码]header: { [代码][代码]'Content-Type'[代码][代码]: [代码][代码]'application/json'[代码] [代码]},[代码][代码] [代码][代码]success: [代码][代码]function[代码] [代码](res) {[代码][代码] [代码][代码]console.log(res.data)[代码][代码] [代码][代码]that.setData({[代码][代码] [代码][代码]re: res.data,[代码][代码] [代码][代码]})[代码][代码] [代码][代码]wx.showToast({[代码][代码] [代码][代码]title: [代码][代码]'已提交'[代码][代码],[代码][代码] [代码][代码]icon: [代码][代码]'success'[代码][代码],[代码][代码] [代码][代码]duration: 2000[代码][代码] [代码][代码]})[代码][代码] [代码][代码]}[代码][代码] [代码][代码]})[代码][代码] [代码][代码]},[代码][代码]})[代码] 为了方便大家研究,我把后端的php源码也贴出来。 search.php [代码]<?php[代码][代码]header([代码][代码]"Content-type:text/json;charset=utf8"[代码][代码]);[代码][代码]//定义参数[代码][代码]$id[代码] [代码]= [代码][代码]$_GET[代码][代码][[代码][代码]"id"[代码][代码]];[代码][代码]//表单验证[代码][代码]if[代码][代码]([代码][代码]empty[代码][代码]([代码][代码]$id[代码][代码])){[代码][代码] [代码][代码]echo[代码] [代码]"[{\"result\":\"表单为空...\"}]"[代码][代码];[代码][代码]}[代码][代码]else[代码][代码]{[代码][代码] [代码][代码]//连接数据库[代码][代码] [代码][代码]$con[代码] [代码]= mysql_connect([代码][代码]"数据库链接"[代码][代码],[代码][代码]"账号"[代码][代码],[代码][代码]"密码"[代码][代码]);[代码][代码] [代码][代码]//设置数据库字符集 [代码][代码] [代码][代码]mysql_query([代码][代码]"SET NAMES UTF8"[代码][代码]);[代码][代码] [代码][代码]//查询数据库[代码][代码] [代码][代码]mysql_select_db([代码][代码]"数据库名"[代码][代码], [代码][代码]$con[代码][代码]);[代码][代码] [代码][代码]$result[代码] [代码]= mysql_query([代码][代码]"SELECT * FROM test WHERE id like '%$id%'"[代码][代码]);[代码][代码] [代码][代码]$results[代码] [代码]= [代码][代码]array[代码][代码]();[代码][代码] [代码][代码]while[代码][代码]([代码][代码]$row[代码] [代码]= mysql_fetch_assoc([代码][代码]$result[代码][代码]))[代码][代码] [代码][代码]{[代码][代码] [代码][代码]$results[代码][代码][] = [代码][代码]$row[代码][代码];[代码][代码] [代码][代码]}[代码][代码] [代码][代码]// 将数组转成json格式[代码][代码] [代码][代码]echo[代码] [代码]json_encode([代码][代码]$results[代码][代码]);[代码][代码] [代码][代码]//关闭数据库连接[代码][代码] [代码][代码]mysql_close([代码][代码]$con[代码][代码]);[代码][代码]}[代码][代码]?>[代码] *数据库表名为test,里面一共有两个字段,一个是id,一个是title 所以index.wxml里面有两个值 [代码]<[代码][代码]view[代码] [代码]wx:for[代码][代码]=[代码][代码]"{{re}}"[代码] [代码]wx:key[代码][代码]=[代码][代码]"re"[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]view[代码] [代码]style[代码][代码]=[代码][代码]'color:#f00;'[代码][代码]>{{item.result}}</[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]view[代码] [代码]style[代码][代码]=[代码][代码]'color:green;'[代码][代码]>{{item.title}}</[代码][代码]view[代码][代码]>[代码][代码]</[代码][代码]view[代码][代码]>[代码] wx:for="{{re}}"指的是循环数组,在js代码中,我们把所有服务端取得的数据,存进了re的数组 然后,{{item.result}}指的是服务端返回表单为空的结果。{{item.title}}返回的是搜索结果,这个结合你的数据库吧,你想展示什么结果,你就把title改成你数据库的相关字段。 [图片]