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


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 相关文章推荐
htm调用JS代码
Mar 15 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
Dec 20 Javascript
ionic中列表项增加和删除的实现方法
Jan 22 Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 Javascript
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
js html实现计算器功能
Nov 13 Javascript
javascript关于“时间”的一次探索
Jul 24 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 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访问查询mysql数据的三种方法
2006/10/09 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
2016/06/07 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
python3中zip()函数使用详解
2018/06/29 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
python画图的函数用法以及技巧
2019/06/28 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
Noon埃及:埃及在线购物
2019/11/26 全球购物
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
怎样拟定创业计划书
2014/05/01 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
检讨书大全
2015/01/27 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
李强感恩观后感
2015/06/17 职场文书
SQL之各种join小结详细讲解
2021/08/04 MySQL