json--json渲染微信小程序

最新推荐文章于 2023-01-12 16:36:21 发布

危笑qwq

最新推荐文章于 2023-01-12 16:36:21 发布

阅读量217

点赞数

分类专栏：微信小程序探索 json

本文链接：https://blog.youkuaiyun.com/qw160/article/details/115703737

版权

微信小程序探索同时被 2 个专栏收录

8 篇文章

订阅专栏

json

2 篇文章

订阅专栏

本文介绍了如何在小程序中通过`index.wxml`的输入框获取用户输入的ID，并在`index.js`中利用该ID拼接URL进行`wx.request`请求，从而从后台数据库获取相应数据。示例代码展示了输入事件处理、数据绑定及请求响应的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

index.wxml

通过一个输入框把url的id传给js

<input type="text" placeholder="输入id" name="search" value="" placeholder-class="plac"  bindinput="inputValue" />
<view  >  
  
<text>城市：{{data.City}}</text>
<view></view>
<text>公司名：{{data.CustomerID}}</text>
      </view>

index.js

event.detail.value接收传来的id,字符串拼接成url,并发送wx.request请求
url java后台访问数据库代码见
https://blog.youkuaiyun.com/qw160/article/details/115700896?spm=1001.2014.3001.5501

// index.js
// 获取应用实例
const app = getApp()

Page({

 
  data: {
    inputValue: "",
  },
  /**输入函数 */
inputValue: function (event) {
  this.setData({
    inputValue: event.detail.value
  })
   console.log(this.data)
  console.log(event.detail.value)
  let that=this;
wx.request({
  url: 'http://localhost:8080/json/'+event.detail.value,
  data:{},
  method:'GET',
  header:{
    'content-type' : 'application'
  },
  success: function(res){
    that.setData({
      data:res.data,
    });
  }
  
})


  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {



  }
})