javascript - 根据按钮点击时给定的信息创建一个标签

Question

我的网站上有此表格:

<form action>
    <input type = "number" placeholder = "Combat ID" name = "combat id" min = "0" max = "9999999999" required/>
    <button type = "button" id = "check_button">Check</button>
    <div class = "form-group">
        <label for = "Character" style = "color:white;">Character</label>
        <select id = "Character" name = "Character">
            List of chars
        </select>
    </div>
    <h2 style = "color:white;padding-top:2%;">Other info</h2>
    ...............
    <button type = "submit" class = "btn btn-default">Submit!</button>
</form>

我想要的是，当您输入战斗 ID 时，单击“检查”按钮，然后在选择框中仅显示该战斗中的这 5 个字符。当向 API 提交战斗 ID 时，我从 API 获取这 5 个字符名称.

因此，当用户单击“检查”按钮时，我需要使用给定的战斗 ID 向 API 发送请求，然后相应地填充选择标记。

Answer 1

我不会用勺子喂你并告诉你一切，但我会给你一个良好的开端。

既然您已经允许使用 jQuery，那么我将这样做:

jQuery 代码:

<input id="combat-id" type = "number" placeholder = "Combat ID" name = "combat id" min = "0" max = "9999999999" required/>

基本上，我给 Combat ID 字段的 ID 为 combat-id

现在，在这段 JS 代码中，您要做的就是调用 jQuery 库中的 $() 函数，并向其传递一个选择器 #check_button并向其添加一个事件监听器。您在选择器上调用 on 函数，并为第一个参数提供字符串中的操作，并在第二个参数中传递一个要在该事件发生时执行的闭包。 在第一行，您将获得 #combat-id 中的值。字段。

$('#check_button').on('click', function (event) {

    var combatId = $('#combat-id').val();

    // Do what you want with it now.

    event.preventDefault();
});

event.preventDefault();被调用以停止页面刷新。第二个参数中的闭包传递了一个事件变量，该变量可用于在事件中执行各种操作。

现在，您只需调用 API 并填充列表即可。您可以非常轻松地做到这一点。

如果您想执行 POST 请求，请执行以下操作:

$.post('/url/to/go', { var: val, combatId: combatId });

或者对于 GET 请求:

$.get('/url/to/go', { var: val, combatId: combatId });

由于您使用的是 PHP，因此可以获得 combatId像这样:

$_GET['combatId']或$_POST['combatId']取决于您选择的 REQUEST 方法。

您可以将每个请求分配给一个变量，如下所示:

var request = $.post(....);

并执行以下操作:

request.success( function (data) {
   // the data variable will have data you displayed to the screen.
});

request.error( function (error) {
  // this will be called if the request failed. The error variable will have some sort of error info.
});

所以在这段代码中，你可以在 .success() 中放入一些代码函数来填充列表。您可以做的是使用 PHP 以 JSON 格式输出内容，然后您可以在 JavaScript 中解析它，如下所示:

data = JSON.parse(data)

它的作用是将 JSON(JavaScript 对象表示法，一种表示 JS 类对象的语言，即 JavaScript 中的字符串)转换为原生 JavaScript 对象。

要追加，请输入 <select>标记一个 id，比如说 #select

然后，您可以选择它并向其添加字符串，如下所示:

$('#select').append('<option value="' + data.value + '">' + data.text + '</option>');

在这里，我假设数据是一个具有两个属性的对象:value和text我将该数据附加到 <select>列表。