SSM框架与聚合api示例（星座配对demo）
api： 链接: 聚合数据接口.
框架：Spring SpringMVC MyBatis
效果图
输入男女星座，提交后得到各项指数
js代码
<script type="text/javascript">
function getYinyuan() {
var x = '这里输入聚合申请的key值';
jQuery.ajax({
url : "getyinyuan",
cache : false,
type : "post",
data : {
//传入男女的星座数据
men:$('#nan').val(),
women:$('#nv').val(),
key:x
},
success : function(data, textStatus) {
$('#zhishu').val(data.result.zhishu);
$('#bizhong').val(data.result.bizhong);
$('#xiangyue').val(data.result.xiangyue);
$('#tcdj').val(data.result.tcdj);
$('#jieguo').val(data.result.jieguo);
$('#lianai').val(data.result.lianai);
$('#zhuyi').val(data.result.zhuyi);
}
});
}
</script>
java代码
/**
*导入的包
*/
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.URL;
import java.net.URLConnection;
import java.net.URLEncoder;
@PostMapping(value = "getyinyuan",produces = "application/json;charset=utf-8")
@ResponseBody
public String getyinyuan(@RequestParam String men,@RequestParam String women,@RequestParam String key) throws IOException {
/**
* 注意
* http请求是不接受中文参数的
* 使用指定的编码机制，将字符串编码为 application/x-www-form-urlencoded 格式
*/
men = URLEncoder.encode(men, "utf-8");
women = URLEncoder.encode(women, "utf-8");
//外接口URL路径拼接
String urlStr = "http://apis.juhe.cn/xzpd/query"
+ "?men="+men
+ "&women="+women
+ "&key="+key;
//链接URL
URL url=new URL(urlStr);
//返回结果集
StringBuffer document = new StringBuffer();
//创建链接
URLConnection conn = url.openConnection();
//读取返回结果集
BufferedReader reader = new BufferedReader(new InputStreamReader(conn.getInputStream(),"utf-8"));
String line = null;
if ((line = reader.readLine()) != null){
document.append(line);
}
reader.close();
//返回line格式为下图所示
return line;
}
返回的结果格式
Html全部代码
页面部分用了layui
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>星座配对</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="<%=request.getContextPath() %>/layui/css/layui.css" media="all">
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.7.1.min.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title"
style="margin-top: 20px;">
<legend>星座配对</legend>
</fieldset>
<div class="layui-form-item">
<label class="layui-form-label">男</label>
<div class="layui-input-block">
<input id="nan" type="text" name="title" required lay-verify="required" placeholder="请输入星座" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">女</label>
<div class="layui-input-block">
<input id="nv" type="text" name="title" required lay-verify="required" placeholder="请输入星座" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo" onclick="getYinyuan()">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">指数</label>
<div class="layui-input-block">
<input id="zhishu" type="text" name="title" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">比重</label>
<div class="layui-input-block">
<input id="bizhong" type="text" name="title" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">两情相悦指数</label>
<div class="layui-input-block">
<input id="xiangyue" type="text" name="title" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">天长地久指数</label>
<div class="layui-input-block">
<input id="tcdj" type="text" name="title" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">结果描述</label>
<div class="layui-input-block">
<input id="jieguo" type="text" name="title" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">恋爱建议</label>
<div class="layui-input-block">
<textarea id="lianai" style="width: 1000px" placeholder="" class="layui-textarea" name="desc"></textarea>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">注意事项</label>
<div class="layui-input-block">
<textarea id="zhuyi" style="width: 1000px;height: 200px" placeholder="" class="layui-textarea" name="desc"></textarea>
</div>
</div>
<script src="<%=request.getContextPath()%>/layui//layui.js"
charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script type="text/javascript">
function getYinyuan() {
var x = '你的key值'
jQuery.ajax({
url : "getyinyuan",
cache : false,
type : "post",
data : {
men:$('#nan').val(),
women:$('#nv').val(),
key:x
},
success : function(data, textStatus) {
$('#zhishu').val(data.result.zhishu);
$('#bizhong').val(data.result.bizhong);
$('#xiangyue').val(data.result.xiangyue);
$('#tcdj').val(data.result.tcdj);
$('#jieguo').val(data.result.jieguo);
$('#lianai').val(data.result.lianai);
$('#zhuyi').val(data.result.zhuyi);
}
});
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
