如何在jQuery函数中传递多参数并通过Ajax发送数据至服务端

你碰到的「传两个参数正常，加了第三个字符串参数整个函数就失效」的问题，本质是内联onClick事件里的动态字符串没加JS语法要求的引号，直接导致脚本执行崩溃，根本走不到Ajax的逻辑环节。
之前传两个参数能跑通，是因为前两个参数一个是整数类型的分区ID，一个是代表当前元素的this引用，都是JS原生能识别的合法语法，不会触发解析错误；唯独第三个从后端输出的数据库名字符串，没有做语法层面的包裹，页面实际渲染出来的onClick代码会变成类似这样的无效格式：

<!-- 实际渲染的无效代码示例 -->
<a href="#" onclick="getPosts(2, this, user_db_01)" class="...">用户社区分区</a>

浏览器解析这段代码时，会把user_db_01当成一个不存在的JS变量，直接抛出Uncaught ReferenceError错误，整个点击事件流程直接中断，表现出来就是「函数完全失效」，和Ajax逻辑本身没有任何关系。

1. 临时修正：给动态字符串参数加语法包裹 #

给动态输出的db_name参数外层加上JS识别的引号，注意和onClick本身的HTML属性引号做区分，推荐用单引号包裹：

<!-- 修正后的a标签写法 -->
<a href="#" onclick="getPosts(<%= sec.getId() %>, this, '<%= sec.getDb_name() %>')" 
   class="c-link list-group-item list-group-item-action">
  <%= sec.getSection() %>
</a>

如果数据库存储的db_name值本身可能包含单引号，额外加简单的字符串转义逻辑即可，避免再次触发语法错误。

2. 长期稳妥方案：用自定义data属性存动态参数 #

完全避免内联拼JS字符串的转义坑，把所有后端动态值存在DOM的data-*自定义属性里，onClick只传当前元素引用，在JS函数里读取参数值即可，从根源上杜绝语法解析错误：

<!-- 带自定义属性的a标签 -->
<a href="#" 
   data-pid="<%= sec.getId() %>"
   data-db="<%= sec.getDb_name() %>"
   onclick="getPosts(this)" 
   class="c-link list-group-item list-group-item-action">
  <%= sec.getSection() %>
</a>

对应的JS函数改造后可统一处理传参逻辑，不需要对内联拼接的字符串做额外处理：

function getPosts(temp) {
    // 从当前关联的DOM元素上读取动态参数
    const postid = parseInt($(temp).data('pid')) || 0;
    const db_name = $(temp).data('db') || '';

    $("#loader").show();
    $("#post-container").hide();
    $(".c-link").removeClass('active');

    $.ajax({
        url: "load_data.jsp",
        type: 'POST',
        data: { pid: postid, db: db_name },
        success: function (data) {
            $("#loader").hide();
            $("#post-container").show();
            $("#post-container").html(data);
            $(temp).addClass('active');
        },
        error: function (jqXHR, textStatus) {
            console.log(textStatus);
        }
    })
}

对应的页面初始化调用也可以和元素绑定逻辑统一，不需要手动硬编码参数值：

$(document).ready(function () {
    let defaultPostRef = $('.c-link')[0];
    getPosts(defaultPostRef);
});

修改代码后打开浏览器开发者工具的控制台面板，点击对应链接如果不再抛出未定义变量的报错，Ajax请求会正常携带pid和db两个参数发送到load_data.jsp，后端就能正常接收到对应值了。

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