开发需求
微信小程序已经是非常火了,而且学习也比较容易,但是对于初学者来说还是一件比较伤脑筋的事,接下来给大家分享一下小程序搜索的思路。
流程
1、表单(输入框、提交按钮、提交的name值)
2、接收表单数据(js获取表单name=keyword的值)
3、通过wx.request向服务器后端发起请求查询数据库
4、返回JSON格式的数据给小程序,js解析渲染到小程序前端展示
界面
代码
index.wxml
<!-- 标题 --> <view class="title">小程序搜索</view> <!-- 搜索框view --> <view class="search_con"> <!-- 表单 --> <form bindsubmit="formSubmit"> <!-- 记得设置name值,这样JS才能接收name=keyword的值 --> <input type="text" name="keyword" class="search_input" placeholder='你要找什么呢?'/> <button formType="submit" class="search_btn">搜索</button> </form> </view> <!-- 搜索结果展示 --> <view wx:for="{{re}}" wx:key="re" class="search_result"> <!-- 当提交空白表单的时候 --> <view class="empty">{{item.empty}}</view> <!-- 当有搜索结果的时候 --> <view class="resname">{{item.resname}}</view> <!-- 当查询不到结果的时候 --> <view class="noresult">{{item.noresult}}</view> </view>
index.js
其中里面的
http://localhost/search.php"htmlcode">
const app = getApp() Page({ data: {}, //执行点击事件 formSubmit: function (e) { //声明当天执行的 var that = this; //获取表单所有name=keyword的值 var formData = e.detail.value.keyword; //显示搜索中的提示 wx.showLoading({ title: '搜索中', icon: 'loading' }) //向搜索后端服务器发起请求 wx.request({ //URL url: 'http://localhost/search.php"htmlcode">/* 搜索样式 */ .title{ text-align: center; font-size: 20px; font-weight: bold; } .search_con{ width: 80%; margin:20px auto; } .search_con .search_input{ border: 1px solid rgb(214, 211, 211); height: 45px; border-radius: 100px; font-size: 17px; padding-left: 15px;/*此处要用padding-left才可以把光标往右移动15像素,不可以用text-indent*/ color: #333; } .search_con .search_btn{ margin-top: 15px; width: 100%; height: 45px; background: #56b273; color: #fff; border-radius: 100px; } .search_result{ width: 80%; margin:10px auto; } .search_result .empty{ text-align: center; color: #f00; font-size: 15px; } .search_result .noresult{ text-align: center; color: #666; font-size: 15px; } .search_result .resname{ text-align: left; color: #333; font-size: 15px; }服务端
search.php
<"keyword"]; //过滤表单空格 $keyword2 = trim($keyword1); //当表单提交空白数据时 if(empty($keyword2)){ //构建数组 $arr = array( "empty" => "表单不能为空" ); //把数组转换为json $data = json_encode($arr); echo "[$data]"; }else{ //过滤表单特殊字符 $replace = array('!','@','#','$','%','^','&','*','(',')','_','-','+','=','{','}','[',']',';',':','"','<','>','"数据库地址","数据库账号","数据库密码"); if (!$con){die('Could not connect: ' . mysql_error());} mysql_select_db("数据库名", $con); mysql_query("SET NAMES UTF8"); //查询数据库 $result = mysql_query("SELECT * FROM 表名 WHERE 需要查询的字段 like '%$keyword3%' ORDER BY ID DESC"); $results = array(); //查询数据库是否存在这条记录 $exist = mysql_num_rows($result); if ($exist) { //遍历输出 while ($row = mysql_fetch_assoc($result)){ $results[] = $row; } //输出JSON echo json_encode($results); //当查询无结果的时候 }else{ //构建数组 $arr = array( "noresult" => "暂无结果" ); //把数组转换为json $data = json_encode($arr); echo "[$data]"; } //断开数据库连接 mysql_close($con); } "text-align: center">以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年11月16日
2024年11月16日
- 群星《2024好听新歌36》AI调整音效【WAV分轨】
- 梁朝伟.1986-朦胧夜雨裡(华星40经典)【华星】【WAV+CUE】
- 方芳.1996-得意洋洋【中唱】【WAV+CUE】
- 辛欣.2001-放120个心【上海音像】【WAV+CUE】
- 柏菲·万山红《花开原野1》限量开盘母带ORMCD[低速原抓WAV+CUE]
- 柏菲·万山红《花开原野2》限量开盘母带ORMCD[低速原抓WAV+CUE]
- 潘安邦《思念精选集全纪录》5CD[WAV+CUE]
- 杨千嬅《千嬅新唱金牌金曲》金牌娱乐 [WAV+CUE][985M]
- 杨钰莹《依然情深》首版[WAV+CUE][1G]
- 第五街的士高《印度激情版》3CD [WAV+CUE][2.4G]
- 三国志8重制版哪个武将智力高 三国志8重制版智力武将排行一览
- 三国志8重制版哪个武将好 三国志8重制版武将排行一览
- 三国志8重制版武将图像怎么保存 三国志8重制版武将图像设置方法
- 何方.1990-我不是那种人【林杰唱片】【WAV+CUE】
- 张惠妹.1999-妹力新世纪2CD【丰华】【WAV+CUE】