本文将详细介绍在使用 AJAX 从数据库动态生成
在动态表单开发中，经常需要通过 AJAX 从后端获取数据，然后动态地创建表单元素，例如
问题分析
问题的核心在于，当使用 JavaScript 将从 AJAX 请求返回的数据动态添加到 HTML 元素时，如果数据类型不匹配或拼接方式不正确，JavaScript 可能会尝试将字符串转换为数字，从而导致 NaN 的出现。
解决方案
以下是一个完整的解决方案，包括后端代码和前端代码，以及详细的解释。
1. 后端代码 (PHP – Laravel 示例)
<?php
namespace App/Http/Controllers;
use App/Models/Medicine;
use Illuminate/Http/JsonResponse;
class MedicineController extends Controller
{
public function getDrugs(): JsonResponse
{
$drugs = Medicine::get();
$drug_drop_down = "<option value=''>Select drug</option>";
foreach ($drugs as $drug) {
$drug_drop_down .= "<option value='" . $drug->id . "'>" . $drug->name . "</option>";
}
return response()->json($drug_drop_down);
}
}
登录后复制
解释：
- 这段 PHP 代码从 Medicine 模型中获取所有药品数据。
- 它构建一个包含所有
- 确保返回的 JSON 数据是包含完整
2. 前端代码 (JavaScript – jQuery 示例)
$(document).ready(function() {
$("#add_prescription").click(function(e) {
e.preventDefault();
$.ajax({
type: 'GET',
url: 'drugs', // 替换为你的 API 接口
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 + // 直接将包含 option 的字符串插入到 select 标签中
"</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>"
);
},
error: function(jqXHR, textStatus, errorThrown) {
console.error("AJAX request failed:", textStatus, errorThrown);
}
});
});
});
登录后复制
解释：
- 使用 jQuery 的 $.ajax 方法向后端请求数据。
- 在 success 回调函数中，直接将后端返回的包含
- 关键在于，不要尝试对 data 进行任何算术运算或字符串拼接，直接将其作为 HTML 字符串插入。
- 添加了 error 回调函数，用于处理 AJAX 请求失败的情况，方便调试。
3. 避免 NaN 的关键
- 后端返回 HTML 字符串： 后端直接生成包含所有
- 前端直接插入 HTML： 前端直接将后端返回的 HTML 字符串插入到
- 正确使用字符串拼接： 确保在拼接 HTML 字符串时，使用字符串拼接运算符 +，而不是算术运算符。
完整示例
假设 Medicine 模型包含 id 和 name 两个字段，并且数据库中存在以下数据：
| id | name |
|---|---|
| 1 | Quinine |
| 2 | Malariaquine |
当点击 “Add prescription” 按钮时，将会动态生成以下 HTML 代码：
<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'>
<option value=''>Select drug</option>
<option value='1'>Quinine</option>
<option value='2'>Malariaquine</option>
</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>
登录后复制
总结
通过以上方法，可以有效地避免在使用 AJAX 动态生成
以上就是使用 AJAX 从数据库动态创建 Option Select的详细内容，更多请关注php中文网其它相关文章！