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


Create one tag according to given info on button click

我的网站上有这样的表格:

<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个字符的名称。

因此,当用户点击"检查"按钮时,我需要向API发送带有给定战斗id的请求,然后相应地填充选择标签。

我不会把一切都告诉你,但我会给你一个良好的开端。

既然你允许jQuery,下面是我的做法:

jQuery代码:

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

基本上,我给战斗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()函数中放入一些代码来填充列表。您可以使用JSON格式的PHP输出内容,并且可以使用如下JavaScript进行解析:

data = JSON.parse(data)

它将把JSON(JavaScript Object Notation,一种表示类似JS对象的语言,在JavaScript中是一个字符串)转换为本地JavaScript对象。

要附加,请给<select>标签一个id,比如#select

然后,你可以选择它并像这样添加字符串:

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

在这里,我假设数据是一个具有两个属性的对象:valuetext,并将该数据附加到<select>列表中。