Grails GSP页面脚本问题：输入参数传入后端时变为null

核心错误 #

你混淆了前端JS和后端Groovy代码的执行时机，同时存在JS语法错误：

• ${storeCommand.numOfBranches(id)}是GSP的后端表达式，在页面加载阶段就会执行，此时前端的id变量还未定义，所以传入的参数是null，完全达不到“点击按钮时传入用户输入ID”的效果。
• 前端取值代码value()多了括号，JS中获取输入框值是属性而非方法，应该写成.value。

正确实现步骤 #

1. 修正前端JS的取值语法 #

把错误的取值代码改成：

var id = document.getElementsByName("franchiseID")[0].value;

2. 通过AJAX异步请求后端接口 #

因为页面未保存，无法直接用后端表达式获取实时输入的ID，必须通过AJAX将前端输入的ID传给后端，再获取返回的门店数量：

第一步：在Grails控制器中新增处理请求的Action

比如在你的StoreController中添加：

def getBranchCount() {
    def franchiseId = params.franchiseID
    // 调用业务逻辑获取门店数量，复用你已有的numOfBranches方法
    def count = storeCommand.numOfBranches(franchiseId)
    render count as JSON // 返回JSON格式的结果
}

第二步：修改前端JS，实现AJAX请求

function getItemsLength(){
    var id = document.getElementsByName("franchiseID")[0].value;
    if (!id) { // 先校验用户是否输入了ID
        alert("请输入加盟ID");
        return;
    }
    // 原生JS发送AJAX请求，也可以用jQuery简化代码
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '${createLink(controller: "store", action: "getBranchCount")}?franchiseID=' + encodeURIComponent(id), true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var itemLength = xhr.responseText;
            alert("门店数量：" + itemLength);
            // 若要把结果展示在页面，可提前加个元素，比如：
            // document.getElementById("countDisplay").textContent = itemLength;
        }
    };
    xhr.send();
}

3. 页面展示结果（可选） #

如果需要把结果显示在页面而非弹窗，可添加一个展示元素：

<div>门店数量：<span id="countDisplay">0</span></div>

然后在AJAX的成功回调中更新该元素内容即可。

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