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


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 相关文章推荐
extjs4 treepanel动态改变行高度示例
Dec 17 Javascript
javascript删除字符串最后一个字符
Jan 14 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
Oct 17 Javascript
javascript编写实用的省市选择器
Feb 12 Javascript
jquery使用经验小结
May 20 Javascript
js右下角弹出提示框示例代码
Jan 12 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 Javascript
JS实现扫雷项目总结
May 19 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强制类型转换,慎用!
2013/06/06 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
用Python编程实现语音控制电脑
2014/04/01 Python
python实现多线程网页下载器
2018/04/15 Python
Django框架模型简单介绍与使用分析
2019/07/18 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
Python 解决相对路径问题:&quot;No such file or directory&quot;
2020/06/05 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
如何用PHP实现邮件发送
2012/12/26 面试题
SQL语言面试题
2013/08/27 面试题
写演讲稿要注意的六件事
2014/01/14 职场文书
全国道德模范事迹
2014/02/01 职场文书
2014年元旦活动方案
2014/02/15 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
小学教育见习报告
2014/10/31 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书