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


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 相关文章推荐
javascript使用activex控件的代码
Jan 27 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
解析javascript 实用函数的使用详解
May 10 Javascript
Javascript改变CSS样式(局部和全局)
Dec 18 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
express的中间件bodyParser详解
Dec 04 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
laydate 显示结束时间不小于开始时间的实例
Aug 11 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 Javascript
js实现详情页放大镜效果
Oct 28 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 动态执行带有参数的类方法
2009/04/10 PHP
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
php查看当前Session的ID实例
2015/03/16 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
番茄的表单验证类代码修改版
2008/07/18 Javascript
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
2020/09/22 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
Python内置函数之filter map reduce介绍
2014/11/30 Python
Python基于动态规划算法计算单词距离
2015/07/25 Python
Linux中Python 环境软件包安装步骤
2016/03/31 Python
Python反转序列的方法实例分析
2018/03/21 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
python三引号输出方法
2019/02/27 Python
python实现一个猜拳游戏
2020/04/05 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
Vision Direct比利时:在线订购隐形眼镜
2019/08/27 全球购物
大专生自我鉴定范文
2013/10/01 职场文书
个人求职自荐信范文
2015/03/06 职场文书
毕业班工作总结
2015/08/10 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
Python获取字典中某个key的value
2022/04/13 Python