2021年5月7日更新这是写的最新的一篇文章大家看这篇:https:///article/157081.htmhttps:///article/157081.htm 界面比较丑,主要实现逻辑... 超级简单的界面,表单,提交按钮,搜索结果展示区域...下面是index.wxml







搜索结果

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








搜索结果

{{item.result}}
{{item.title}}
*跟前端差不多,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/2021-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

})

}

})
},
})
//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/2021-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/2021-5-24/search.php?id=' + formData,
url: 'http://localhost/2021-5-24/search.php?id=' + formData,这个很容易理解

var that = this;
var formData = e.detail.value.id;

var that = this;
var formData = e.detail.value.id;
先把表单name=id的值获得,然后赋给formData这个变量
然后,在url进行拼接,用+号拼接这个变量即可...然后,提交到接口,后端进行处理即可,后端处理后返回json格式的数据,然后通过
that.setData({

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

re: res.data,
})进行打印在控制台,你也可以渲染在index.wxml为了方便大家研究,我把后端的php源码也贴出来。search.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);
}
?>
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里面有两个值

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


{{item.result}}
{{item.title}}
wx:for="{{re}}"指的是循环数组,在js代码中,我们把所有服务端取得的数据,存进了re的数组然后,{{item.result}}指的是服务端返回表单为空的结果。{{item.title}}返回的是搜索结果,这个结合你的数据库吧,你想展示什么结果,你就把title改成你数据库的相关字段。