Elementor动态渲染自定义短码：AJAX实现方案求助

问题背景 #

基于Elementor搭建的WordPress站点，通过Elementor HTML元素添加了两个下拉选择框，点击按钮后希望将选中值传入PHP执行数据库查询。但直接通过变量作为短码参数时，传递的是变量名而非实际值——因为PHP执行优先级高于JavaScript，因此必须通过AJAX实现前后端数据交互。

修改后的代码实现 #

1. Elementor HTML元素代码 #

替换原有的HTML代码，通过jQuery发起AJAX请求传递选中的参数：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<center>
  <label for="InfoPack"><b>请选择ID</b></label><br>
  <select name="InfoPack" id="InfoPack">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
  </select>
</center>

<center>
  <label for="InfoPack1"><b>请选择姓名</b></label><br>
  <select name="InfoPack1" id="InfoPack1">
    <option value="1">Moe</option>
    <option value="2">Dooley</option>
    <option value="3">Finn</option>
    <option value="4">James</option>
    <option value="5">Doe</option>
    <option value="6">Stanley</option>
    <option value="7">Day</option>
    <option value="8">Jay</option>
  </select>
</center>

<button id="button">处理!</button>
<p>
  <div id="result"></div>
</p>

<script>
jQuery(document).ready(function($) {
  $('#button').click(function() {
    $('#result').html('加载中...');
    const fieldId = $('#InfoPack').val();
    const nameId = $('#InfoPack1').val();

    $.ajax({
      url: 'https://你的域名/wp-admin/admin-ajax.php',
      type: 'POST',
      data: {
        action: 'fetch_guest_data',
        field_id: fieldId,
        name_id: nameId
      },
      success: function(response) {
        $('#result').html(response);
      },
      error: function() {
        $('#result').html('请求失败，请重试');
      }
    });
  });
});
</script>

替换代码中的https://你的域名为实际站点域名

2. functions.php代码 #

添加AJAX处理函数，同时修复原代码的SQL注入风险：

// 注册AJAX动作（支持登录/未登录用户访问）
add_action('wp_ajax_fetch_guest_data', 'fetch_guest_data_callback');
add_action('wp_ajax_nopriv_fetch_guest_data', 'fetch_guest_data_callback');

function fetch_guest_data_callback() {
    // 验证参数合法性
    if (!isset($_POST['field_id']) || !isset($_POST['name_id'])) {
        echo '参数错误';
        wp_die();
    }

    // 转换为整数避免SQL注入
    $field_id = intval($_POST['field_id']);
    $name_id = intval($_POST['name_id']);

    $servername = "localhost";
    $username = "xxx";
    $password = "xxx";
    $dbname = "xxx";

    // 建立数据库连接
    $conn = new mysqli($servername, $username, $password, $dbname);
    if ($conn->connect_error) {
        die("连接失败: " . $conn->connect_error);
    }

    // 使用预处理语句执行查询
    $sql = "SELECT id, nid, firstname, lastname FROM MyGuests WHERE id = ? AND nid = ?";
    $stmt = $conn->prepare($sql);
    $stmt->bind_param("ii", $field_id, $name_id);
    $stmt->execute();
    $result = $stmt->get_result();

    // 输出查询结果
    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            echo "ID: " . $row["id"]. " - 姓名: " . $row["firstname"]. " " . $row["lastname"]. "<br>";
        }
    } else {
        echo "无匹配结果";
    }

    // 关闭连接与语句
    $stmt->close();
    $conn->close();
    wp_die(); // 必须调用以结束AJAX请求
}

关键说明 #

• 移除原短码调用逻辑，直接通过AJAX传递参数到PHP处理函数，避开PHP与JavaScript的执行优先级冲突
• 使用intval()和预处理语句彻底解决SQL注入风险
• 同时注册登录/未登录用户的AJAX动作，确保所有访问者都能使用功能

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