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

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

在动态网页开发中，经常需要根据用户操作或数据变化，动态地创建和更新 HTML 元素。其中，动态创建选项选择框（<select>）是一个常见的需求。本教程将通过一个实际案例，详细讲解如何使用 AJAX 从数据库获取数据，并动态地将这些数据填充到选项选择框中。

问题分析

在提供的案例中，目标是在点击 "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 + "</select>" + 中的 + 被错误地解析为加法运算符，导致 data 被转换为数字，由于 data 是一个字符串，转换结果为 NaN。

解决方案

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

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

1. 修改 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>");
           }
       });
   });

   登录后复制

   注意：

   

   怪兽AI数字人

   数字人短视频创作，数字人直播，实时驱动数字人

   44

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

2. 修改后端代码 (Controller):

   function () {
       $drugs = Medicine::get();
       return response()->json( $drugs); // 返回包含对象数组的 JSON
   }

   登录后复制

   后端返回的数据应该是一个包含对象数组的 JSON，每个对象包含 id 和 name 属性。

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

1. 修改 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 字符串中。

2. 修改后端代码 (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中文网其它相关文章！