我正在尝试使用 Jquery-Ajax 使用 JSON 响应，但它不起作用。正在加载空选择下拉列表
Posted
技术标签:
【中文标题】我正在尝试使用 Jquery-Ajax 使用 JSON 响应，但它不起作用。正在加载空选择下拉列表【英文标题】：I am trying to consume a JSON response using Jquery-Ajax, but it's not working. Empty selection dropdown is loading 【发布时间】：2020-09-03 20:40:16 【问题描述】：下面是我点击时的 SOAPUI (GET) 响应：http://localhost:8082/getCountries
HTTP/1.1 200
内容类型=应用程序/json
Transfer-Encoding=chunked
日期=格林威治标准时间 2020 年 5 月 18 日星期一 03:38:46
Keep-Alive=timeout=60
连接=保持活动
["countryId":91,"countryName":"India","countryId":94,"countryName":"SriLanka"]
下面是带有Jquery-Ajax代码的jsp页面：
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Cascading Dropdown</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function()
alert("Hello");
$.ajax(
url: "http://localhost:8082/getCountries"
).then(function(result)
alert("Success");
var result = JSON.parse(result);
var s = '';
for(var i = 0; i < result.length; i++)
s += '<option value="' + result[i].countryId + '">' + result[i].countryName + '</option>';
$('#comboboxCountry').html(s);
);
);
</script>
</head>
<body>
<form>
<table>
<tr>
<td>Country</td>
<td>
<select id="comboboxCountry" style="width: 200px"></select>
</td>
</tr>
</table>
</form>
</body>
</html>
我在这里使用了两个项目。一个正在生成 JSON 数组，另一个正在消耗。我在下面发布了两个控制器：
生产控制器：
@Controller
public class MainController
@Autowired
private MainService mainService;
@ResponseBody
@GetMapping(path = "/getCountries",produces = "application/json")
public List<Country> getCountires()
return mainService.findAll();
@ResponseBody
@GetMapping(path = "/getStates/countryId",produces = "application/json")
public List<State> getStates(@PathVariable("countryId") Integer countryId)
return mainService.findbyId(countryId);
消费控制器：
@Controller
public class MainController
@RequestMapping("/")
public String home(Model model)
System.out.println("loading welcome page");
return "welcome";
【问题讨论】：
浏览器控制台有错误吗？ 没有错误。 @菲尔 浏览器的 Network 控制台怎么样？您看到向http://localhost:8082/getCountries 发出的请求了吗？回应是什么？
@Phil 是的，我可以在那里看到 2 个错误：在“localhost:8082/getCountries”（索引）处访问 XMLHttpRequest：1 从源“localhost:8083”访问已被 CORS 策略阻止：否' Access-Control-Allow-Origin' 标头出现在请求的资源上。 :8082/getCountries:1 加载资源失败：net::ERR_FAILED
我不知道您使用的是什么浏览器，但如果我的 Network 相关错误，它们也会发布到 Console .所以当你说“没有错误”时，你到底在看什么？
【参考方案1】：
现在我知道这是一个愚蠢的问题。但这个答案可能会帮助新手并尝试学习。
这个问题可以通过注释你的控制器来解决：
@CrossOrigin(origins = "requesting host url goes here", maxAge = 3600)
【讨论】：
以上是关于我正在尝试使用 Jquery-Ajax 使用 JSON 响应，但它不起作用。正在加载空选择下拉列表的主要内容，如果未能解决你的问题，请参考以下文章