javascript - 我希望能够根据角色类别及其阵营选择神灵列表

标签 javascript java ajax

我正在尝试为 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 - Controller 类

@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) {
...
}

关于javascript - 我希望能够根据角色类别及其阵营选择神灵列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56649977/

相关文章:

java - ClassNotFoundException : org. springframework.context.support.AbstractApplicationContext

jquery - 访问 JSON 元素时返回 "object Object"或未定义

javascript - jquery.each 同步

javascript - 如何从nodeJS中的XML解析器获取数据

javascript - 当函数传递给 child 时, react onClick 事件不会触发

javascript - 基于php ajax的表单显示空白页

javascript - 如何在CoffeeScript中循环输出多个对象的属性?

java - SQL 查询包含选定的自动增量行时无法执行

java - 写这个 IP 阀的正确方法是什么?

javascript - "The requested resource does not support http method ' POST' - 405 响应