在JavaScript文件中拼接HTML时使用PHP echo出现错误如何解决

问题根本原因 #

• PHP是服务端执行的脚本，代码会在服务器上运行完成后才把结果输出到浏览器；而JS是客户端执行的脚本，运行在用户的浏览器中。你直接把PHP代码写在JS的字符串拼接逻辑里，服务器不会解析这段嵌入在JS字符串中的PHP代码，会原样返回给浏览器，浏览器无法识别PHP语法自然会报错。
• 如果你的这段JS代码是写在独立的.js后缀文件中，默认配置下Nginx/Apache等服务端软件不会对.js文件做PHP解析，就算你写法正确也没法执行PHP代码。

解决方法1：JS代码写在.php文件中（适合快速实现） #

你不需要把PHP代码放在JS的字符串拼接逻辑里，直接让服务端提前渲染好所有option的HTML内容，再注入到JS的字符串中即可，注意转义引号避免冲突：

$(this).parent().parent().parent().children(".clientNewOrder").html(
'<div class="form-group">' +
'    <div class="input-group mb-3">' +
'        <div class="input-group-prepend">' +
'            <select class="form-control" required>' +
'                <option value="">Select Client</option>' +
                <?php
                $item = null;
                $valor = null;
                $selectClient = ControllerClients::ctrReadClients($item, $values);
                $options = '';
                foreach ($selectClient as $key => $value) {
                    // 转义特殊字符避免JS引号冲突
                    $clientId = htmlspecialchars($value["id"]);
                    $clientName = htmlspecialchars($value["name"]);
                    $options .= "<option value='{$clientId}'>{$clientName}</option>";
                }
                // 直接输出option字符串到JS代码中
                echo "'".addslashes($options)."'";
                ?> +
'            </select>' +
'        </div>' +
'    </div>' +
'</div>'
)

解决方法2：JS代码写在独立.js文件中（前后端分离更规范） #

你需要额外写一个后端接口返回客户列表数据，然后JS通过AJAX请求数据后动态生成option：

第一步：编写后端接口（示例路径api/get_clients.php） #

<?php
// 引入控制器文件
include_once '你的控制器路径/ControllerClients.php';
header('Content-Type: application/json');
$item = null;
$valor = null;
$selectClient = ControllerClients::ctrReadClients($item, $values);
// 返回JSON格式的客户列表
echo json_encode($selectClient);
?>

第二步：修改JS代码，动态请求生成选项 #

// 先请求客户列表
$.get('api/get_clients.php', function(clients) {
  // 拼接基础HTML
  let selectHtml = '<div class="form-group">' +
'    <div class="input-group mb-3">' +
'        <div class="input-group-prepend">' +
'            <select class="form-control" required>' +
'                <option value="">Select Client</option>';
  // 遍历客户列表生成option
  clients.forEach(item => {
    selectHtml += `<option value="${item.id}">${item.name}</option>`;
  });
  // 拼接剩余HTML并插入目标节点
  selectHtml += '</select></div></div></div>';
  $(this).parent().parent().parent().children(".clientNewOrder").html(selectHtml);
})

额外提示：你原来的PHP代码中echo <option value=".'.$value["id"].' ">'.$value["name"].'</option>;写法本身存在语法错误，echo后面的HTML内容需要用引号包裹，否则PHP运行时就会直接报错。

内容的提问来源于stack exchange，提问作者Reichlich