http如何使用POST,$ajax向provider传递数据并获取数据(以在浏览器上画圆为例)

1.首先,定义index.jsp页面

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<%--新添加 --%>
<title>Insert title here</title>
</head>


<body>
<div>
<img id="imgResult"/>
</div>
</body>


<script>
function showData(data) {
$("#imgResult").attr("src", data);
}
function showError(data) {
$("#imgResult").text(XMLHttpRequest.status+":"+textStatus);
}
$(document).ready(function() {
console.log("OK");
$.ajax({
url : "/restful/a/circle",
type : 'POST',
contentType : "data/circle",
data : "300,200,100,500,600",
success : showData,
error : showError
});
})
</script>
</html>


上述代码中body主体中定义了一个div盒子 其中有一个img元素,id为imgResult

在javascript语句中 先看到$ajax的格式以及各参数的含义作用

url为获取资源的路径 type为传递的方式 contentType为你定义的数据类型 data为你要向http后台传递的数据 success为成功获取资源后所进行的操作 error为失败后进行的操作。

这里url中的路径为我编写的provider程序的Path路径 

contentType为我自定义的类型

success成功后执行的函数中的语句:$("#imgResult").attr("src", data); 意义为把我所获取到的值赋给img 的src属性。


2.Provider部分

两个java文件 

MyAPI.java  

package restful.api;


import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.zip.GZIPInputStream;


import javax.ws.rs.Consumes;
import javax.ws.rs.GET;
import javax.ws.rs.POST;
import javax.ws.rs.PUT;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.QueryParam;


@Path("/a")
public class MyAPI {
@POST
@Path("/circle")
@Consumes("data/circle")
@Produces("data/circle")
public String[] providerTest(String[] data){
return data;
}
}


其中的@Path定义了此类的路径  /a   ,然后在类里的providerTest函数被声明为进行POST操作,Path路径为  /circle  ,而@Consumes和@Produces,两者都有与Provider功能类绑定的功能,前者用在读操作时,后者用在写操作时。

类中的函数providerTest接收的是来自index.jsp中的data数据 ,之后返回给jsp页面的也是String数组。

MyProvider.java

package restful.provider;


import java.awt.Color;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.Serializable;
import java.lang.annotation.Annotation;
import java.lang.reflect.Type;
import java.util.Iterator;
import java.util.List;
import javax.imageio.ImageIO;
import javax.ws.rs.Consumes;
import javax.ws.rs.Produces;
import javax.ws.rs.WebApplicationException;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.core.MultivaluedMap;
import javax.ws.rs.ext.MessageBodyReader;
import javax.ws.rs.ext.MessageBodyWriter;
import javax.ws.rs.ext.Provider;
import org.apache.commons.io.IOUtils;
import sun.misc.BASE64Encoder;


@Provider
@Consumes("data/circle") // 绑定 输入
@Produces("data/circle") // 输出标签
public class MyProvider implements MessageBodyReader<Serializable>, MessageBodyWriter<Serializable> {
private String[] data;


// 检测数据是否可吃
@Override
public boolean isReadable(Class<?> clazz, Type type, Annotation[] annotations, MediaType mediatype) {
// TODO Auto-generated method stub
System.out.println("----------------isReadble-----------------");
System.out.println("clazz:" + clazz.getName());
System.out.println("type:" + type.getTypeName());
for (Annotation an : annotations) {
System.out.println("annotations:" + an.annotationType().getName());
}
System.out.println("mediaType:" + mediatype.getType() + "/" + mediatype.getSubtype());


return true;
}


// 处理 对流入膜的物质进行加工处理 把输入的东西变成任意东西交付出去 把苹果转换成苹果汁
@Override
public Serializable readFrom(Class<Serializable> clazz, Type type, Annotation[] annotations, MediaType mediatype,
MultivaluedMap<String, String> multivaluedMap, InputStream inputStream)
throws IOException, WebApplicationException {
// TODO Auto-generated method stub
System.out.println("------------------isReadFrom-----------------");
System.out.println("clazz:" + clazz.getName());
System.out.println("type:" + type.getTypeName());
for (int i = 0; i < annotations.length; i++) {
Annotation an = annotations[i];
System.out.println("annotations:" + an.annotationType().getName());
}
System.out.println("mediaType:" + mediatype.getType() + "/" + mediatype.getSubtype());
Iterator<String> keys = multivaluedMap.keySet().iterator();
while (keys.hasNext()) {
String key = (String) keys.next();
List<String> list = multivaluedMap.get(key);
for (String value : list) {
System.out.println(key + ":" + value.toString());
}
}


String inputText = IOUtils.toString(inputStream, "UTF-8");//
data = inputText.split(",");
System.out.println(data.length);
return data;
}


@Override
public long getSize(Serializable serializable, Class<?> clazz, Type type, Annotation[] annotations,
MediaType mediatype) {
// TODO Auto-generated method stub
data = String[].class.cast(serializable);
System.out.println("------------------isGetSize------------------");
System.out.println("clazz:" + clazz.getName());
System.out.println("type:" + type.getTypeName());
for (int i = 0; i < annotations.length; i++) {
Annotation an = annotations[i];
System.out.println("annotations:" + an.annotationType().getName());
}
System.out.println("mediaType:" + mediatype.getType() + "/" + mediatype.getSubtype());
System.out.println("serializable length:" + data.length);
return -1;
}


@Override
public boolean isWriteable(Class<?> clazz, Type type, Annotation[] annotations, MediaType mediatype) {
// TODO Auto-generated method stub
System.out.println("------------------isWriteable------------------");
System.out.println("clazz:" + clazz.getName());
System.out.println("type:" + type.getTypeName());
for (int i = 0; i < annotations.length; i++) {
Annotation an = annotations[i];
System.out.println("annotations:" + an.annotationType().getName());
}
System.out.println("mediaType:" + mediatype.getType() + "/" + mediatype.getSubtype());
return true;
}


@SuppressWarnings("null")
@Override
public void writeTo(Serializable serializable, Class<?> clazz, Type type, Annotation[] annotations, MediaType mediatype,
MultivaluedMap<String, Object> multivaluedMap, OutputStream outputStream) throws IOException, WebApplicationException {
System.out.println("----------------isWriteTo-----------------");
System.out.println("clazz:"+clazz.getName());
System.out.println("type:"+type.getTypeName());
for(int i=0;i<annotations.length;i++){
Annotation an = annotations[i];
System.out.println("annotations:"+an.annotationType().getName());
}
System.out.println("mediaType:"+mediatype.getType()+"/"+mediatype.getSubtype());
Iterator<String> keys = multivaluedMap.keySet().iterator();
while(keys.hasNext()){
String key=(String)keys.next();
List<Object> list = multivaluedMap.get(key);
for(Object value:list){
System.out.println(key+":"+value.toString());
}
}

data = String[].class.cast(serializable);//把输入的转化成所需的
String result = "";
System.out.println(data);
System.out.println(data.length);
int []a = new int[5];
for(int i = 0;i<data.length;i++){
result += "数据" + i + "是" + data[i] + "<br>";
int temp = Integer.valueOf(data[i]);
a[i] = temp;
}

BufferedImage image = getBufferedImage(a[0]-a[2],a[1]+a[2],a[2],a[3],a[4]);
  
        ByteArrayOutputStream baos = new ByteArrayOutputStream();  
        ImageIO.write(image, "jpg", baos);
        byte[] bytes = baos.toByteArray();
        
        BASE64Encoder encoder = new sun.misc.BASE64Encoder(); 
        encoder.encodeBuffer(bytes).trim();         
        String bs64 = encoder.encode(bytes);
        bs64 = "data:image/jpg;base64,"+bs64;
        
        outputStream.write(bs64.getBytes());  
}


public BufferedImage getBufferedImage(int x,int y,int radius,int width,int height) {

BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics2D graphics = (Graphics2D) image.getGraphics();
graphics.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);

graphics.setColor(Color.WHITE);  
        graphics.fillRect(0, 0, width, height);
// 对指定的矩形区域填充颜色
graphics.setColor(Color.BLACK);
graphics.drawOval(x, y, radius, radius);

return image;
}
}


此程序画圆采用的是BufferedImage建立面板,Graphics建立画笔,最后用drawOval函数画出宽高相等的椭圆(也就是正圆)。


而传递数据的原理是 建立ByteArrayOutputStream输出流对象,利用ImageIO类函数write()将图片写入到输出流。然后把输出流ByteArrayOutputStream转换成二进制byte数组,

再用BASE64Encoder把二进制转成所需的Base64数据,最后在字符串前加上所需的前缀,这里是data:image/jpg;base64, 然后再将最终的字符串转成Byte形式放进outputStream流里面,传递回给index.jsp页面加以显示。

重点就在于数据的不断转换,以及数据的获取。

有问题请务必提出,会加以思考纠正的。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值