js,小程序共用java后端进行数据传输

最新推荐文章于 2024-08-16 22:30:00 发布

不染心

最新推荐文章于 2024-08-16 22:30:00 发布

阅读量700

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_38234785/article/details/79128092

版权

jQuery 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一，java后端代码

package maven_weather;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;

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

import net.sf.json.JSONArray;

/**
 * Servlet implementation class testServelt
 */
public class testServelt extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public testServelt() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("接受请求成功！");
		System.out.println("定义一个数组，存放数据！");
		
		String callbacka=request.getParameter("callbackfun");
		System.out.println("回调函数的名字："+callbacka);
		
//		这里自己定义一个数组，提供测试
		ArrayList<String> peopleList=new ArrayList<String>();
		peopleList.add("1230");
		peopleList.add("189");
		peopleList.add("456");
		peopleList.add("0000");
//		System.out.print("遍历这个peopelList数组：");
//		for(String l:peopleList){
//			System.out.print(l+" ");
//		}
//		System.out.println();
//		System.out.println("=========================");
		
//		将数组转换成json格式，然后再交给回调函数，
		System.out.println("将数组转换成json格式：");
		JSONArray jArray = JSONArray.fromObject(peopleList);
		System.out.println(jArray);
		
		PrintWriter writer=response.getWriter();
		String s = "{\"images\": "+jArray+"}";
		if(callbacka==null){
			s=s;
		}else{
			s=callbacka+"("+s+")";
		}
		response.getWriter().write(s);
		}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

二，html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<script type="text/javascript">
			$.ajax({
				  async:false,
				  cache:false,
			      url: 'http://localhost:8080/maven/testServelt',
			      type: 'GET',
			      dataType: 'jsonp',
			      jsonp:'callbackfun',//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
			      jsonpCallback:"jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
			      timeout: 5000,
			      contentType: 'application/json; charset=utf-8',
			      success:function(result){
			      	alert(result.images[0])
			      },
			      error:function(res){
			      	alert("res")
			      }
			    });
//		
		</script>
	</body>
</html>

三，微信小程序js代码

 /*
  向后端发送请求
  */
  btnPost:function(){
    var url="http://localhost:8080/maven/testServelt"
    wx.request({
      url: url,
      // jsonp: 'callbackfun',//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
      // jsonpCallback: "jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
      headers: {
        'Content-Type': 'application/json'
      },
      success: function (res) {
        console.log(res.data.images);
      }
    })
  }