SSM框架与聚合api示例（星座配对demo）

最新推荐文章于 2024-07-18 17:03:28 发布

刘宏望

最新推荐文章于 2024-07-18 17:03:28 发布

阅读量368

点赞数

分类专栏： api 文章标签： java js api

本文链接：https://blog.csdn.net/lhw112233/article/details/109155157

版权

api 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>