网站推广.NET

网站推广.NET

微信小程序开发搜索功能

来源:互联网
搜索结果{{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}}返回搜索结果。将此与您的数据库结合。如果要显示任何结果,可以将标题更改为数据库中的相关字段。