您的位置 首页 java

微信小程序之向后端发送数据——java,极速上手

最终效果:

前端四步:

一、先在utils文件夹下的app.json文件添加一个页面“ pages/dome01/demo01 ”,

Ctrl+s 保存会自动在pages文件夹下生成一个名为demo01的文件夹。

二、打开 pages 目录,打开demo01.wxml文件。代码如下:

 <view class="box">
    <view class="title">用户登录</view>
    <form bindsubmit='loginForm'>
        <input type='text' name='username' placeholder="请输入账号"></input>
        <input type='password' name='password' placeholder="请输入密码"></input>
        <view class='ligin-button'>
            <button formType="submit">发送</button>
            <button formType="reset">重置</button>
        </view>
    </form>
</view>  

三、打开demo01.wxss文件。代码如下:

 .box{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.title{
    text-align: center;
    font-size: 25px;
}
text{
    transform: translate(-50%,0px);
    text-align: center;
    background-color: turquoise;
}
 input {
    width: 300px;
    height: 40px;
    border: deeppink solid 2px;
    border-radius: 10px;
     margin : 10px;
    font-size: 20px;
}
button{
    width: 200px;
    height: 40px;
    background-color: deeppink;
    margin: 5px;
}  
微信小程序之向后端发送数据——java,极速上手

四、打开emo01.js文件。代码如下:

 Page({
    loginForm: function(data) {
        var username = data.detail.value.username;//获取账号
        var password = data.detail.value.password;//获取密码
        wx. request ({
            url: '#39;, //请求路劲
            data: {
              username: username,
              password: password
            },
             header : {
              'content-type': 'application/json'
            },
            success (res) {
              console.log(res.data)//打印响应的数据
            }
          })
    }
})  

后端 java

一、需要有 servlet 基础,代码如下:

 package wx;
import javax.servlet. annotation .WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IO Exception ;
@WebServlet(value = "/wx01")//完整路劲为:
public class wx01  extends  HttpServlet {
    @Override
    protected  void  service(HttpServletRequest request, HttpServletResponse response) throws IOException {
        String username = request.getParameter("username");//根据username获取用户账号
        String password = request.getParameter("password");//根据password获取用户密码
        System.out.println(username+":"+password);
        response.getWriter().print(username+":"+password);//响应的数据
    }
}
  

完结!

文章来源:智云一二三科技

文章标题:微信小程序之向后端发送数据——java,极速上手

文章地址:https://www.zhihuclub.com/182450.shtml

关于作者: 智云科技

热门文章

网站地图