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


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 加号(+)运算符号
Dec 06 Javascript
比较详细的关于javascript 解析json的代码
Dec 16 Javascript
jQuery 处理网页内容的实现代码
Feb 15 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
基于jquery实现图片放大功能
May 07 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
关于javascript作用域的常见面试题分享
Jun 18 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 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
window.onresize 多次触发的解决方法
2013/11/08 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
Python字典简介以及用法详解
2016/11/15 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
wxPython实现分隔窗口
2019/11/19 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
Html5元素及基本语法详解
2016/08/02 HTML / CSS
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书
代领报检证委托书范本
2014/10/11 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
2015年国庆节新闻稿
2015/07/18 职场文书
Python实现简单的猜单词
2021/06/15 Python
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL