JS函数调用无法传递输入框值问题求助（含完整代码）

看起来你遇到了一个很常见的前端参数传递坑，别着急，咱们一步步拆解问题并解决它：

一、先确认变量是否正确获取到值 #

静态传参正常，但用变量失效，首先要排查从DOM获取的变量值是否符合预期。比如下拉框的inputbranche可能为空，或者输入框inputplz的格式不对（比如用户没输入就点击搜索）。

在你的$("#searchIt").click事件里添加日志打印，确认变量值：

$("#searchIt").click(function(){
    var inputbranche = $('#branche').val(); 
    var inputplz = $('#plz').val(); 
    // 新增：打印变量值，在浏览器控制台查看
    console.log("获取到的branche:", inputbranche);
    console.log("获取到的plz:", inputplz);
    
    // 其他原有代码...
    // 替换静态参数为变量
    searchCompanies(inputbranche, inputplz); 
});

打开浏览器控制台（F12），点击搜索按钮后查看日志：

• 如果inputbranche是空的：检查下拉框的id="branche"是否和HTML里的select标签id一致（你的HTML是正确的，但可以再确认）
• 如果inputplz是空的：可能用户没输入，或者输入框type="number"导致非数值被过滤，后端需要处理空值情况

二、改进AJAX的参数传递方式（关键！） #

你当前的AJAX参数是用字符串拼接的：

data:'wheretostart=0&branche='+branche+'&plz='+plz,

这种方式很容易出问题：比如参数里包含特殊字符（比如branche里的_或者德语特殊字符）、空值、格式错误，都会导致请求参数不合法。

推荐用对象形式传递参数，jQuery会自动帮你处理编码和格式：

function searchCompanies(branche, plz) {
    searches++;
    var shownbranchename = $('#branchename').val();
    $.ajax({
        url: "url/to/script",
        type: "GET",
        // 改成对象形式，自动处理参数编码
        data: {
            wheretostart: 0,
            branche: branche,
            plz: plz
        },
        success: function(data){
            // 原有success逻辑...
        },
        // 新增：添加error回调，排查请求失败原因
        error: function(xhr, status, error) {
            console.log("AJAX请求错误状态:", status);
            console.log("错误详情:", error);
            console.log("后端返回内容:", xhr.responseText);
        }
    });
}

这种方式能避免很多字符串拼接带来的错误，比如空值会被正确传递为plz=，而不是拼接成&plz导致参数格式错误。

三、检查后端的参数校验逻辑 #

你的PHP后端里有brancheIsBranche($_GET['branche'])的校验，如果这个函数对变量判断严格，可能导致：

1. 如果inputbranche是空字符串，函数返回false，后端返回norealinput错误
2. 函数可能对大小写敏感？比如静态传的tischler是小写，但下拉框的value如果有大写（你的HTML是小写，没问题，但可以确认）

另外，后端处理plz的逻辑：

$statement->bindValue(':zipcode', "%;$plz;%", PDO::PARAM_STR);

如果plz是空值，这里会变成%;%;%，可能不符合数据库里assignment_zipcoderange的存储格式（比如存储的是;12345;67890;），导致查询不到数据。可以在后端加个判断，如果plz为空，就调整查询条件，比如去掉zipcode的过滤。

四、排查AJAX请求的实际情况 #

在浏览器控制台的Network标签里，点击搜索按钮后查看对应的GET请求：

• 看Request URL里的参数是否正确（比如?wheretostart=0&branche=tischler&plz=44444）
• 看Response里的返回内容，如果后端报错，能直接看到错误信息

总结修改后的完整JS代码 #

$("#searchIt").click(function(){
    var inputbranche = $('#branche').val(); 
    var inputplz = $('#plz').val(); 
    console.log("获取到的branche:", inputbranche);
    console.log("获取到的plz:", inputplz);
    
    window.history.replaceState(null, null, "?branche="+inputbranche+"&plz="+inputplz);
    $('#fulllink').val(window.location.href);
    $('#sm').attr('data-url', window.location.href);
    if(searches == 0) {
        scrollTo("#topscroll");
    } else {
        scrollTo("*[data-resultnumber='1']");
    }
    searchCompanies(inputbranche, inputplz); 
});

function searchCompanies(branche, plz) {
    searches++;
    var shownbranchename = $('#branchename').val();
    $.ajax({
        url: "url/to/script",
        type: "GET",
        data: {
            wheretostart: 0,
            branche: branche,
            plz: plz
        },
        success: function(data){
            var count = 0;
            if(data['success'] == 1) {
                while(data[count] != 0 ) {
                    if(jQuery.inArray(data[count]['id'], shownIDs) == -1) {
                        var txt = "<div data-resultnumber='"+number+"' data-companyid='"+data[count]['id']+"' class='col-sm-6 col-md-4 p0'><div class='box-two proerty-item'><div class='item-thumb'><a href='property-1.html' ><img src='assets/img/demo/property-3.jpg'></a></div><div class='item-entry overflow'><h5><a href='property-1.html'> "+data[count]['companyname']+" <i class='fa fa-check-circle' aria-hidden='true'></i></a></h5><div class='dot-hr'></div><span class='pull-left'><b> Branche :</b> "+data[count]['branches']+" </span><h3 class='pull-right'><span class='fa fa-star checked'></span><span class='fa fa-star checked'></span><span class='fa fa-star checked'></span><span class='fa fa-star'></span><span class='fa fa-star'></span></h3><p style='display: none;'>"+data[count]['shorttext']+"</p><div class='property-icon'>&nbsp;<i class='fa fa-map-marker' aria-hidden='true'></i> "+data[count]['companyzipcode']+" | <i class='fa fa-users' aria-hidden='true'></i> "+data[count]['employeecount']+" | <i class='fa fa-envelope' aria-hidden='true'></i> 355 </div></div></div></div>";
                        $("#list-type").append(txt);
                        shownIDs.push(data[count]['id']);
                    }
                    count++;
                    number++;
                    if(shownbranchename !== branche) {
                        $('#branchename').text(branche);
                    }
                }
            } else {
                var txt = data['errors'];
                $("#list-type").append(txt);
            }
        },
        error: function(xhr, status, error) {
            console.log("AJAX请求错误:", status, error);
            console.log("后端返回:", xhr.responseText);
        }
    });
}

按照上面的步骤排查，基本就能解决变量传参失效的问题啦。

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