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


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 相关文章推荐
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
js获取ajax返回值代码
Apr 30 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
深入理解ES7的async/await的用法
Sep 09 Javascript
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
Sep 05 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 22 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
php array_filter除去数组中的空字符元素
2020/06/21 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
玩转python爬虫之URLError异常处理
2016/02/17 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
基于Python log 的正确打开方式
2018/04/28 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
班级活动策划书
2014/02/06 职场文书
环保倡议书
2014/04/14 职场文书
面试必备的求职信
2014/05/25 职场文书
美化环境标语
2014/06/20 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
校车安全管理责任书
2015/05/11 职场文书
校园安全学习心得体会
2016/01/18 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电
MySQL数据库表约束讲解
2022/06/21 MySQL
MySQL 原理与优化之Update 优化
2022/08/14 MySQL