说明

作者在这里是使用Jquery的Ajax实现跨域。

JSON格式:

1）键名称：用双引号括起　　
2）字符串：用使用双引号括起
3）数字，布尔类型不需要使用双引号括起
4）$("#areaId").val() 方法获取的值都为对象

向后端跨域访问获取数据Get方式

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script>

          $(document).ready(function () { //获取DOM
		    $("#btn").click(function () {  //获取按键事件
		        $.ajax({
		            type:"GET",
		            url:"http://localhost:8080/demo/superadmin/listarea",
		            dataType:"json",
		            success:function (data) {
		           var result = JSON.stringify(data);//将后端返回的Json转化为字符串
		           $("#text").val(result);//显示在HTML页面文本框内
					}
		        });
		    });
		});
    </script>

跨域传递值

当只传递一个一个值时

当需要传递单个值时可以用如下方法，比较简单，不建议使用！。
在URL里赋值

url:"http://localhost:8080/demo/superadmin/listarea？areaId"+$("#areaId").val()+"&password="+$("#password").val(),
//传递的值的名称必须要和后端方法中的值的名称一样。
//这里areaId是数字，password是字符串

传递多个值时

传值还是都用这个方法吧

<script>
	 
          $(document).ready(function () {
		   
		    $("#btn").click(function () {
		        $.ajax({
		            type:"POST",
		            url:"http://localhost:8080/demo/superadmin/addarea",
			    data:{"areaId":$("#areaId").val(),
				  "areaName":$("#areaName").val(),
				  "priority":$("#priority").val()
				  },
			        contentType : 'application/json',
		            dataType:"json",
		            success:function (data) {
		           var result = JSON.stringify(data); 
		           $("#text").val(result);
			   }
		        });
		    });
		});
    </script>

传递对象

Ajax跨域要传对象都是传Json对象，所以前端要把值都转化成Json对象，后端也要写上解析Json对象的配置。
SpringBoot的后端配置如下，在传参的函数内配置。

private Map<String, Object> modifyArea(@RequestBody Area area)
//@RequestBody标签就是解析Json对象的标签

前端配置如下

<script>
	 
          $(document).ready(function () {
		   
		    $("#btn").click(function () {
		         var str={"areaId":$("#areaId").val(),
				  "areaName":$("#areaName").val(),
				  "priority":$("#priority").val()
                 		 };
		        $.ajax({
		            type:"POST",
		            url:"http://localhost:8080/demo/superadmin/addarea",
			    data:JSON.stringify(str),//将数组转化为Json对象
			    contentType : 'application/json',
		            dataType:"json",
		            success:function (data) {
		           var result = JSON.stringify(data); 
		           $("#text").val(result);
			   }
		        });
		    });
		});
    </script>