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

2020-12-15
来源:


搜索结果{{item.result}}{{item.title}}

*类似于前端,必须将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

然后,在网址中进行拼接,然后在此变量上加上+号...

然后,提交给接口,后端可以对其进行处理。后端处理后,以json格式返回数据,然后传递


  that.setData({     re: res.data,   })

在控制台中打印,也可以在index.wxml中渲染

为了方便您的研究,我还发布了后端PHP源代码。

search.php


*该数据库表名为test,其中有两个字段,一个是id,另一个是title

所以index.wxml中有两个值


{{item.result}}{{item.title}}

wx:for =“ {{re}}”是指圆形数组。在js代码中,我们将服务器获取的所有数据存储在re

的数组中

然后,{{item.result}}表示服务器返回空表格的结果。 {{item.title}}返回搜索结果。将此与您的数据库结合。如果要显示任何结果,可以将标题更改为数据库中的相关字段。

分享