Я пытаюсь создать таблицу символов для 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 "";
}
}