jeesite发布json数据接口，ajax跨域调用的方法

首先，我们需要让登录接口可以跨域调用，登录之后才能获取其他数据，不然会有权限拦截，提示未登录。

在jeesite中，官方文档中有关于登录接口的调用方法。如下图：

调用链接：

http://127.0.0.1:8980/js/a/login?__login=true&__ajax=json&username=F3EDC7D2C193E0B8DCF554C726719ED2&password=235880C505ACCDA5C581A4F4CDB81DA0

我们可以在浏览器中试一下：

接下来有很重要的一点，@CrossOrigin 具体位置如下：

该注解添加之后，该controller下所有的方法才可以跨域调用。而且，必须指明请求方法，如：

method = RequestMethod.GET。

接下来测试跨域，我这里使用的是Hbuilder，端口不一样，所以可以测试。

html+js代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		
		function flag(){
			//alert(1);
			var url = 'http://127.0.0.1:9999/js/a/login?__login=true&__ajax=json&username=F3EDC7D2C193E0B8DCF554C726719ED2&password=235880C505ACCDA5C581A4F4CDB81DA0';
		    $.ajax({url:url,success:function(result){
		    	/*var new = JSON.stringify(result);*/
		        //alert(result);
		        //alert(JSON.stringify(result));
		        console.log(JSON.stringify(result));
		        var sid = result.sessionid;
		        $("#bbb").val(sid);
		        alert(sid);
		    }});
		    //alert("登录成功");
		}
		
		
		function flag2(){
		    //alert(2);
		    var ssid = $("#bbb").val();
		    var url1 = 'http://127.0.0.1:9999/js/a/employees/employees/listData.json?__sid='+ssid;
			$.ajax({
	             type: "POST",
	             url: url1,
	             data: {sid:ssid},
	             dataType: "json",
	             success: function(result){
	                         alert(result);
			         		 alert(JSON.stringify(result));
			         		 console.log(JSON.stringify(result));
			         		 var data = result.list;
			         		 
			         		 
			         		 $("#tb1").empty("");
			         		 var tr = "<tr>"
											+"<th>姓名</th>"
											+"<th>年纪</th>"
											+"<th>出生日期</th>"
											+"<th>电话</th>"
											+"<th>目前待遇</th>"
											+"<th>期望</th>"
											+"<th>申请职位</th>"
										+"</tr>";
										
							var td = "";
							for (var i in data) {
								td += "<tr><td>"+data[i].name+"</td>"
									+"<td>"+data[i].age+"</td>"
									+"<td>"+data[i].birthday+"</td>"
									+"<td>"+data[i].phone+"</td>"
									+"<td>"+data[i].presenttreatment+"</td>"
									+"<td>"+data[i].expectedtreatment+"</td>"
									+"<td>"+data[i].jobapplication+"</td></tr>"
							}
							
							 $("#tb1").append(tr+td);
	                }
	         });
		}
	</script>
	<body>
		<input type="button" name="" id="aaa" value="哈哈" onclick="flag()"/>
		<input type="button" name="" id="aaa2" value="哈哈2" onclick="flag2()"/>
		<input type="text" name="" id="bbb" value="" />---sid
		<table border="" cellspacing="" cellpadding="" id="tb1">
			<tr>
				<th>姓名</th>
				<th>年纪</th>
				<th>出生日期</th>
				<th>电话</th>
				<th>目前待遇</th>
				<th>期望</th>
				<th>申请职位</th>
			</tr>
			<tr>
				<td>data.name</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
		</table>
	</body>
</html>

这里需要引入js。

我设置的服务器端口为9999，hbuilder端口为8020，跨域调用成功。

点击登录登录成功，我把sessionid获取到放到一个文本框中。

在请求数据的时候，吧sessionid带上，相当于一个令牌。这时候服务器知道你已经登录了，不会进行拦截。

请求数据返回结果如下：

渲染到页面上，效果如下：

这里如何返回json数据官方文档也有说明：

跨域问题解决了，就可以实现前后台分离，或者app后台接口开发了。用了两天，jeesite确实挺爽。

有问题欢迎大家指正。

jeesite发布json数据接口，ajax跨域调用的方法

猜你喜欢