微信小程序 实现与JAVA后台 数据交互(详解简单易懂)

效果展示
Java端:
微信小程序 实现与JAVA后台 数据交互(详解简单易懂)_第1张图片
小程序端
在这里插入图片描述

方法介绍:先建立一个小程序,完成wxml和js代码部分,再创建一个*java web *项目,配置好web.xml文件,然后创建servlet.java文件,进行编程。
这个可以同时完成传数据和接收数据,
小程序中

data:{
          name:"卡尔·弗兰兹",
          weapon:'WarHammer'
        },

是发送的数据
res.data
是接收的数据

JAVA端中

        String   name1 = request.getParameter("name");
        String   name= new String(name1.getBytes("ISO-8859-1"), "UTF-8");
        //对微信小程序编码方式进行转化
        String   weapon1 = request.getParameter("weapon");
        String   weapon= new String(weapon1.getBytes("ISO-8859-1"), "UTF-8");

是接收数据

        Writer out = response.getWriter();
        out.write("Victory");
        out.flush();

是发送数据
或者写成

        Writer out = response.getWriter();
        out.write(name);
        out.flush();
        out.write(weapon);
        out.flush();

即可返回数据到小程序端

wxml代码

  <view>  

js代码


  Page({
    bindtest: function(){
      wx.request({
        url: 'http://localhost:8080/XCXTEST/demo',//填Servelet运行后的地址
        data:{
          name:"卡尔·弗兰兹",
          weapon:'WarHammer'
        },
        method:'GET',
        header: {
          'Content-Type': 'application/x-www-form-urlencoded',
          "Accept": "application/json;charset=utf-8"
        },
        success:function(res){
          console.log(res.data);
        },
        fail:function(res){
          console.log("Failure");
        }
      })
    }
    }) 

java端代码

package servlet;

import java.io.IOException;
import java.io.Writer;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


public class Servlet extends javax.servlet.http.HttpServlet {
	
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        /*设置响应头允许ajax跨域访问*/
        response.setHeader("Access-Control-Allow-Origin", "*");
        /* 星号表示所有的异域请求都可以接受, */
        response.setHeader("Access-Control-Allow-Methods", "GET,POST");
        //获取微信小程序get的参数值并打印
        String   name1 = request.getParameter("name");
        String   name= new String(name1.getBytes("ISO-8859-1"), "UTF-8");
        //对微信小程序编码方式进行转化
        String   weapon1 = request.getParameter("weapon");
        String   weapon= new String(weapon1.getBytes("ISO-8859-1"), "UTF-8");
        System.out.println("name:"+ name+"weapon"+weapon);
        //返回值给微信小程序
        
        Writer out = response.getWriter();
        out.write("Victory");
        out.flush();
    }

    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        this.doPost(request, response);       
    }
}


<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
  <display-name>XCXTESTdisplay-name>
  /*只要动这中间的*/
  
  <servlet>
  
  <servlet-name>dingpiaoservlet-name>
  
		<servlet-class>servlet.Servletservlet-class>
	servlet>
	
	<servlet-mapping>
			
			<servlet-name>dingpiaoservlet-name>
			
			<url-pattern>/demourl-pattern>
	servlet-mapping>
/*只要动这中间的*/
  <welcome-file-list>
    <welcome-file>index.htmlwelcome-file>
    <welcome-file>index.htmwelcome-file>
    <welcome-file>index.jspwelcome-file>
    <welcome-file>default.htmlwelcome-file>
    <welcome-file>default.htmwelcome-file>
    <welcome-file>default.jspwelcome-file>
  welcome-file-list>
web-app>

这个是通过绑定事件点击按钮完成数据交互,当然也可以用 onLoad() {}方法,在页面加载时就完成数据的交互~

你可能感兴趣的:(笔记,java,小程序,servlet,ajax,数据库)