欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序開發(fā)搜索功能實現(xiàn)(前端+后端+數(shù)據(jù)庫)

 更新時間：2020年03月04日 14:54:50   作者：TANKING-  
這篇文章主要介紹了微信小程序開發(fā)搜索功能實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

2019年5月7日更新這是寫的最新的一篇文章大家看這篇：http://www.dbjr.com.cn/article/157081.htm

 界面比較丑，主要實現(xiàn)邏輯...

 超級簡單的界面，表單，提交按鈕，搜索結(jié)果展示區(qū)域...

下面是index.wxml

<!--index.wxml-->
<form bindsubmit="formSubmit">
<!--提交按鈕 -->
<input type="text" name="id" placeholder='輸入關(guān)鍵詞' style='border:1px solid #ccc;height:30px;'/>
<button formType="submit" class="btn">搜索</button>  
</form>
<view>搜索結(jié)果</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
//獲取應(yīng)用實例
const app = getApp()
Page({
 /**
  * 頁面的初始數(shù)據(jù)
  */
 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進(jìn)行拼接，用+號拼接這個變量即可...

然后，提交到接口，后端進(jìn)行處理即可，后端處理后返回json格式的數(shù)據(jù)，然后通過

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

進(jìn)行打印在控制臺，你也可以渲染在index.wxml

為了方便大家研究，我把后端的php源碼也貼出來。

search.php

<?php
header("Content-type:text/json;charset=utf8");
//定義參數(shù)
$id = $_GET["id"];
//表單驗證
if(empty($id)){
  echo "[{\"result\":\"表單為空...\"}]";
}else{
  //連接數(shù)據(jù)庫
  $con = mysql_connect("數(shù)據(jù)庫鏈接","賬號","密碼");
  //設(shè)置數(shù)據(jù)庫字符集 
  mysql_query("SET NAMES UTF8");
  //查詢數(shù)據(jù)庫
  mysql_select_db("數(shù)據(jù)庫名", $con);
  $result = mysql_query("SELECT * FROM test WHERE id like '%$id%'");
  $results = array();
  while($row = mysql_fetch_assoc($result))
  {
    $results[] = $row;
    // 將數(shù)組轉(zhuǎn)成json格式
    echo json_encode($results);
  }
  //關(guān)閉數(shù)據(jù)庫連接
  mysql_close($con);
}
?>

*數(shù)據(jù)庫表名為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}}"指的是循環(huán)數(shù)組，在js代碼中，我們把所有服務(wù)端取得的數(shù)據(jù)，存進(jìn)了re的數(shù)組

然后，{{item.result}}指的是服務(wù)端返回表單為空的結(jié)果。{{item.title}}返回的是搜索結(jié)果，這個結(jié)合你的數(shù)據(jù)庫吧，你想展示什么結(jié)果，你就把title改成你數(shù)據(jù)庫的相關(guān)字段。

到此這篇關(guān)于微信小程序開發(fā)搜索功能實現(xiàn)的文章就介紹到這了,更多相關(guān)小程序搜索功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論