javascript - 我希望能够根据角色类别及其对齐方式选择神灵列表
问题描述
我正在尝试为 D & D 创建一个字符表,但希望能够将两个下拉框的值传递到查询(服务类)中,然后将数据添加到另一个选项列表中。我尝试了多种发布数据的方法,但我得到的只是空字符串。我正在使用 MVC 方法,因为这是我们在我任教的大学一直在使用的方法。
纯粹使用 GET 方法从数据库中获取列表没有问题,但我无法理解如何在不使用按钮的情况下从表单中获取实际数据。一旦值到位,实际查询也不是问题。我找到了很多使用 PHP 的解决方案,但这不是我们正在使用的东西。
HTML
<html>
<head>
<title>D&D 3.5 Character Sheet</title>
<link rel="stylesheet" href="css/index.css">
<script src="/client/js/jquery-3.3.1.min.js"></script>
<script src="/client/js/popper.min.js"></script>
<script src="/client/js/bootstrap.min.js"></script>
<script src="/client/js/js.cookie.min.js"></script>
<script src="/client/js/character.js"></script>
</head>
<body bgcolor="#ffe4c4" onload="pageLoad()">
<form id="characterBasicsForm">
<h1 align="center" style="color: peru; font-size: 75px">Dungeons & Dragons 3.5 Character Sheet</h1>
<div class="container">
<div class="basic">
<div class="cn">
<input id="characterName" class="largest character-input-basics" type="text" required>
<small>Character name</small>
</div>
<div class="pn">
<input id="playerName" class="largest character-input-basics" type="text">
<small>Player name</small>
</div>
<div id="cl" class="cl">
</div>
<div class="level">
<input id="characterLevel" class="medium character-input-basics" type="number" required>
<small>Level</small>
</div>
<div id="race" class="race">
</div>
<div id="alignment" class="al" onchange="test()">
</div>
<div id="deity" class="de">
>
</div>
<div class="size">
<select id="characterSize" class="small character-select-basics">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">large</option>
</select>
<small>Size</small>
</div>
<div class="age">
<input id="characterAge" type="text" class="small character-input-basics">
<small>Age</small>
</div>
<div class="gender">
<select id="characterGender" class="small character-select-basics">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<small>Gender</small>
</div>
<div class="height">
<input id="characterHeight" type="text" class="small character-input-basics">
<small>Height</small>
</div>
<div class="weight">
<input id="characterWeight" type="text" class="small character-input-basics">
<small>Weight</small>
</div>
<div class="eyes">
<input id="characterEyes" type="text" class="small character-input-basics">
<small>Eyes</small>
</div>
<div class="hair">
<input id="characterHair" type="text" class="small character-input-basics">
<small>Hair</small>
</div>
<div class="skin">
<input id="characterSkin" type="text" class="small character-input-basics">
<small>Skin</small>
</div>
</div>
<div class="ability" id="abilities">
ABILITIES
</div>
<div class="content1">
COLUMN 1
</div>
<div class="content2">
COLUMN 2
</div>
<div class="attack">
ATTACK STATS
</div>
<div class="skill" id="skills">
SKILLS
</div>
</div>
<input type="button" value="Save Character">
</form>
</body>
</html>
Javascript
function populateDeity(){
let formData = {'alignment': $('option[name=alignment]').val(), 'characterClass': $('option[name=characterClass]').val()};
alert(formData.toString());
$.ajax({
url: '/character/deity/list',
type: 'GET',
success: deityList => {
let deityHTML = `<select id="deity" class="medium character-select-basics">`;
for (let deity of deityList) {
deityHTML += `<option value = "${deity.deity}">${deity.deity}</option>`;
}
deityHTML += `</select>`;
deityHTML += `<small>Deity</small>`;
alert(deityHTML);
$('#deity').html(deityHTML);
}
})
}
Java - 控制器类
@GET
@Path("/deity/list")
@Produces(MediaType.APPLICATION_JSON)
public String getDeities() {
String status = CharacterService.selectAllDeityInto(Deity.deityList);
Console.log(status);
if (status.equals("OK")) {
JSONArray deityList = new JSONArray();
for (Deity d : Deity.deityList) {
deityList.add(d.toJSON());
}
return deityList.toString();
} else {
System.out.println("An error occurred! " + status);
return "";
}
}
解决方案
GET 请求不接收表单数据。将它们添加为 URL 参数,并在 Java 代码中使用 @PathParam 来读取它们。
@GET
@Path("/deity/list")
@Produces(MediaType.APPLICATION_JSON)
public String getDeities(@PathParam("alignment") final String alignment, @PathParam("characterClass") final String characterClass) {
...
}
推荐阅读
- android - 我如何从android中的服务器获取数据
- javascript - 设置属性后无法更新组件
- solr - PDF to Solr如何索引PDF的段落
- javascript - 如何在 JSDoc 中指定类的类型(不是它的实例)
- spring-boot - spring-boot 2 优雅关闭网络
- mysql - MySQL 根据条件计数和求和
- awk - 如何使用 awk 命令合并行,以便一行中应该有特定的字段
- php - 视图中的除法和乘法 - laravel
- javascript - 如何使用 Angular Material 打开选项卡上的菜单?
- yii2 - Yii2 Select2 使用 ajax 多重:非法偏移类型