微信小程序开发搜索功能实现(前端+后端+数据库)


Posted in Javascript onMarch 04, 2020

2019年5月7日更新这是写的最新的一篇文章大家看这篇:https://3water.com/article/157081.htm

 界面比较丑,主要实现逻辑...

微信小程序开发搜索功能实现(前端+后端+数据库)

 超级简单的界面,表单,提交按钮,搜索结果展示区域...

下面是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
    })
   }
  })
 },
})
url: 'http://localhost/2018-5-24/search.php?id=' + formData,

这个很容易理解

var that = this;
var formData = e.detail.value.id;

先把表单name=id的值获得,然后赋给formData这个变量
然后,在url进行拼接,用+号拼接这个变量即可...

然后,提交到接口,后端进行处理即可,后端处理后返回json格式的数据,然后通过

that.setData({
  re: res.data,
 })

进行打印在控制台,你也可以渲染在index.wxml

为了方便大家研究,我把后端的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改成你数据库的相关字段。

微信小程序开发搜索功能实现(前端+后端+数据库)

到此这篇关于微信小程序开发搜索功能实现的文章就介绍到这了,更多相关小程序搜索功能内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js表数据排序 sort table data
Feb 18 Javascript
基于jQuery的模仿新浪微博时间的组件
Oct 04 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
更靠谱的H5横竖屏检测方法(js代码)
Sep 13 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
vue实现简单的日历效果
Sep 24 Javascript
jquery插件开发模式实例详解
Jul 20 jQuery
js前端对于大量数据的展示方式及处理方法
Dec 02 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 Javascript
微信小程序云函数添加数据到数据库的方法
Mar 04 #Javascript
jquery实现垂直手风琴菜单
Mar 04 #jQuery
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 #Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 #Javascript
js回调函数原理与用法案例分析
Mar 04 #Javascript
在pycharm中开发vue的方法步骤
Mar 04 #Javascript
Vue+Vuex实现自动登录的知识点详解
Mar 04 #Javascript
You might like
多数据表共用一个页的新闻发布
2006/10/09 PHP
PHP 透明水印生成代码
2012/08/27 PHP
php字符串截取函数用法分析
2014/11/25 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
初婚未育证明
2014/01/15 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
保护环境的标语
2014/06/09 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
2014年督导工作总结
2014/11/19 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript