使用 AJAX 从数据库动态创建选项选择框

2025-07-17

使用 AJAX 从数据库动态创建选项选择框

使用 ajax 从数据库动态创建选项选择框

本文将介绍如何使用 AJAX 从数据库动态创建选项选择框，解决动态添加表单元素时，选项无法正确显示，出现 “NaN” 的问题。我们将分析两种实现方案，并重点讲解如何正确地将 AJAX 返回的数据插入到 HTML 元素中，确保选项选择框能够正确显示数据库中的数据。

在动态网页开发中，经常需要根据用户操作或数据变化，动态地创建和更新 HTML 元素。其中，动态创建选项选择框（

问题分析

在提供的案例中，目标是在点击 “Add prescription” 按钮时，动态地添加一个新的包含选项选择框的表单元素。选项选择框中的选项需要从数据库中获取。

最初的实现方案存在一个问题：动态添加的选项选择框中没有显示任何选项，并且在检查元素时，发现选项选择框的内容为 “NaN”。

错误代码片段：

$('#prescription-container').append(" <div class='row'> <div class='col-md-6'>" +
    "<div class='form-group'>" +
    "<label for='drug' class='form-label'>Medicine </label><select name='drug[]'' class='form-control'>" +
    + result +
    "</select>" +
    "</div>" +
    "</div>" +
    "<div class='col-sm-6'>" +
    "<div class='form-group'>" +
    "<label>Comment</label>" +
    "<div class='phone-icon'>" +
    "<input type='text' class='form-control' name='diagnosis'>" +
    "</div>" +
    "</div>" +
    "</div>" +
    "</div>")

登录后复制

问题在于，在字符串拼接的过程中，+ + data + “” + 中的 + 被错误地解析为加法运算符，导致 data 被转换为数字，由于 data 是一个字符串，转换结果为 NaN。

解决方案

正确的做法是确保 + 运算符被用作字符串连接符。以下是两种可行的解决方案：

方案一：前端拼接选项字符串（推荐）

修改 JavaScript 代码：

$("#add_prescription").click(function(e) {
    e.preventDefault();
    var result = "<option value=''>Select Drug</option>";
    $.ajax({
        type: 'GET',
        url: 'drugs',
        success: function(data) {
            if (data.length > 0) {
                $.each(data, function(i, item) {
                    result += "<option value='" + item.id + "'>" + item.name + "</option>";
                });
            }
            $('#prescription-container').append(" <div class='row'> <div class='col-md-6'>" +
                "<div class='form-group'>" +
                "<label for='drug' class='form-label'>Medicine </label><select name='drug[]' class='form-control'>" +
                result +
                "</select>" +
                "</div>" +
                "</div>" +
                "<div class='col-sm-6'>" +
                "<div class='form-group'>" +
                "<label>Comment</label>" +
                "<div class='phone-icon'>" +
                "<input type='text' class='form-control' name='diagnosis'>" +
                "</div>" +
                "</div>" +
                "</div>" +
                "</div>");
        }
    });
});

登录后复制

注意：

确保从 data 中正确提取 id 和 name 属性，使用 item.id 和 item.name 而不是 data.id 和 data.name，因为 data 是数组，item 才是数组中的对象。
在拼接选项字符串时，使用 += 运算符，确保将新的选项添加到 result 变量中。

修改后端代码 (Controller):
```
function () {
    $drugs = Medicine::get();
    return response()->json( $drugs); // 返回包含对象数组的 JSON
}
```
登录后复制
后端返回的数据应该是一个包含对象数组的 JSON，每个对象包含 id 和 name 属性。

方案二：后端直接返回选项字符串

修改 JavaScript 代码：

$("#add_prescription").click(function(e) {
    e.preventDefault();
    $.ajax({
        type: 'GET',
        url: 'drugs',
        success: function(data) {
            $('#prescription-container').append(" <div class='row'> <div class='col-md-6'>" +
                "<div class='form-group'>" +
                "<label for='drug' class='form-label'>Medicine </label><select name='drug[]' class='form-control'>" +
                data +
                "</select>" +
                "</div>" +
                "</div>" +
                "<div class='col-sm-6'>" +
                "<div class='form-group'>" +
                "<label>Comment</label>" +
                "<div class='phone-icon'>" +
                "<input type='text' class='form-control' name='diagnosis'>" +
                "</div>" +
                "</div>" +
                "</div>" +
                "</div>");
        }
    });
});

登录后复制

注意：

移除多余的 + 运算符，确保正确地将 data 插入到 HTML 字符串中。

修改后端代码 (Controller):

function () {
    $drugs = Medicine::get();
    $drug_drop_down = "<option>Select drug</option>";
    foreach($drugs as $drug){
        $drug_drop_down .="<option value='".$drug->id."'>$drug->name</option>";
    }
    return response()->json( $drug_drop_down); // 返回包含选项字符串的 JSON
}

登录后复制

后端直接返回包含所有选项的 HTML 字符串。

总结与注意事项

字符串拼接： 在 JavaScript 中，使用 + 运算符进行字符串拼接时，要特别注意运算符的优先级和类型转换，避免出现意外的结果。
数据格式： 确保前端和后端之间的数据格式一致。如果后端返回的是对象数组，前端需要解析这些对象，并提取需要的数据。如果后端直接返回 HTML 字符串，前端可以直接将其插入到 DOM 中。
代码可读性： 为了提高代码的可读性，可以将动态生成的 HTML 字符串拆分成多个部分，并使用模板字符串（Template literals）来拼接。
安全性： 如果从数据库中获取的数据包含用户输入，需要进行适当的转义，以防止 XSS 攻击。

通过以上两种方案，可以有效地解决动态创建选项选择框时遇到的 “NaN” 问题，并实现从数据库动态加载选项的功能。选择哪种方案取决于具体的需求和项目架构。通常，推荐使用方案一，因为它更灵活，并且可以将数据处理的逻辑放在前端，减轻服务器的压力。

以上就是使用 AJAX 从数据库动态创建选项选择框的详细内容，更多请关注php中文网其它相关文章！

https://www.php.cn/faq/1412534.html