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


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网页制作特殊效果用随机数
May 22 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
JS禁用浏览器退格键实现思路及代码
Oct 29 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
javascript深拷贝和浅拷贝详解
Feb 14 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
原生js实现3D轮播图
Mar 21 Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 Javascript
浅谈 JavaScript 沙箱Sandbox
Nov 02 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令牌 Token改进版
2008/07/18 PHP
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
PHP循环结构实例讲解
2014/02/10 PHP
php解决约瑟夫环示例
2014/04/09 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
php通过strpos查找字符串出现位置的方法
2015/03/17 PHP
PHP异常处理浅析
2015/05/12 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
浅谈JavaScript中面向对象技术的模拟
2006/09/25 Javascript
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
JS的replace方法介绍
2012/10/20 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
JS实现轮播图效果
2020/01/11 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
python根据unicode判断语言类型实例代码
2018/01/17 Python
pandas object格式转float64格式的方法
2018/04/10 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
python获取地震信息 微信实时推送
2019/06/18 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
教师岗位聘任书范文
2014/03/29 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
2014年度思想工作总结
2014/11/27 职场文书