如何优化通过AJAX向数据库存储HTML/Javascript代码的实现

嘿，我来帮你梳理几个更优雅的实现思路，不仅能摆脱硬编码字符串的麻烦，还能顺便解决现有代码里的安全隐患：

1. 从DOM元素中提取代码（推荐） #

如果你的HTML/JS代码已经存在于页面中（比如隐藏的模板、脚本块或者textarea），直接从DOM中读取内容是最方便的方式——既不用在JS里写冗长的字符串，还能让代码更易维护。

示例： #

先在页面中存放你的代码（用隐藏的textarea可以完美保留代码格式）：

<textarea id="targetCode" style="display: none;">
// 这里是你的JavaScript代码
function init() {
  console.log('Hello World');
}

<!-- 这里是你的HTML代码 -->
<div class="demo">
  <p>This is a demo block</p>
</div>
</textarea>

然后修改前端AJAX代码，直接读取这个元素的内容：

<script type="text/javascript">
$(document).ready(function(){
  $("#add_code").click(function(){
    // 直接从DOM中获取代码内容
    var addCode = $("#targetCode").val();
    $.get("includes/dashboard/addcode.php", {addCode: addCode },function(data){
      // 可以在这里添加请求成功后的反馈，比如提示用户
      console.log("代码已成功提交");
    });
  });
});
</script>

2. 使用ES6模板字符串（适合代码写在JS中的场景） #

如果必须在JavaScript中定义代码内容，ES6的模板字符串（用反引号``包裹）支持多行文本，不用手动拼接字符串，可读性大幅提升。

示例： #

<script type="text/javascript">
$(document).ready(function(){
  $("#add_code").click(function(){
    // 用模板字符串编写多行代码，格式完全保留
    var addCode = `
// JavaScript部分
function init() {
  console.log('Hello World');
}

<!-- HTML部分 -->
<div class="demo">
  <p>This is a demo block</p>
</div>
    `;
    $.get("includes/dashboard/addcode.php", {addCode: addCode },function(data){
      console.log("代码已成功提交");
    });
  });
});
</script>

3. 修复后端的SQL注入隐患（重中之重） #

你的现有后端代码虽然用了prepare，但仍然直接将变量拼接到SQL语句中，这完全失去了预处理语句的安全作用，会导致严重的SQL注入问题。必须改用参数绑定的方式：

修正后的后端代码： #

<?php
require('database/connect_database.php');
session_start();

// 先检查session有效性，避免未登录的非法请求
if(!isset($_SESSION['codename'])) {
  exit("请先登录");
}

$addCode = $_GET['addCode'];
$codename = $_SESSION['codename'];

// 使用参数占位符，彻底避免SQL注入
$stmt = $pdo->prepare("INSERT INTO code (codename, w_code) VALUES (:codename, :addCode)");
// 绑定参数到占位符
$stmt->bindParam(':codename', $codename);
$stmt->bindParam(':addCode', $addCode);

$stmt->execute();
?>

额外提示 #

• 如果你的代码包含特殊字符（比如引号、换行），上述两种前端方案都能自动处理，不用手动转义；
• 建议把$.get改成$.post，因为GET请求有长度限制，而且提交代码这类操作更适合用POST方法；
• 可以在前端添加代码内容的校验，避免提交空内容。

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