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

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

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

问题分析

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

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

错误代码片段：

$('#prescription-container').append(" 
 
" +
    "
" +
    "Medicine " +
    + result +
    "" +
    "
" +
    "
" +
    "
" +
    "
" +
    "Comment" +
    "
" +
    "" +
    "
" +
    "
" +
    "
" +
    "
")

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

解决方案

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

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

1. 修改 JavaScript 代码：

   $("#add_prescription").click(function(e) {
       e.preventDefault();
       var result = "Select Drug";
       $.ajax({
           type: 'GET',
           url: 'drugs',
           success: function(data) {
               if (data.length > 0) {
                   $.each(data, function(i, item) {
                       result += "" + item.name + "";
                   });
               }
               $('#prescription-container').append(" 
    
   " +
                   "
   " +
                   "Medicine " +
                   result +
                   "" +
                   "
   " +
                   "
   " +
                   "
   " +
                   "
   " +
                   "Comment" +
                   "
   " +
                   "" +
                   "
   " +
                   "
   " +
                   "
   " +
                   "
   ");
           }
       });
   });

   注意：

   

   星期三企业建站系统1.0

   主要特点为模板驱动,前台页面和数据库数据在模板中以标签方式调用和显示。星期三企业建站系统产品全部代码都为星期三网络原创,有着完全的知识产权。我们会已我们的努力使星期三企业建站系统变的更好!系统功能1\网站信息设置2\菜单管理3\系统页面4\幻灯片管理5\友情链接6\商品分类 7\商品管理 8\资讯分类 9\资讯管理 10\自定义页面分类 11\自定义页面 12\留言管理 13\下载管理 14\选择

   下载
   • 确保从 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(" 
    
   " +
                   "
   " +
                   "Medicine " +
                   data +
                   "" +
                   "
   " +
                   "
   " +
                   "
   " +
                   "
   " +
                   "Comment" +
                   "
   " +
                   "" +
                   "
   " +
                   "
   " +
                   "
   " +
                   "
   ");
           }
       });
   });

   注意：

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

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

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

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

总结与注意事项

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

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