JSP getParameter和JQuery GET ajax有些错误

Question

当我点击按钮时，我需要使用jquery ajax添加GET参数。例如，有一个代码

<i data-toggle="tooltip" class="fa fa-info-circle" id='toolt'></i>
<script>
// Listen for output
socket.on('output', function(data) {
    if(data.length) {
        // Loop through results
        for(var x = 0; x < data.length; x = x + 1) {
            var message = document.createElement('div');

            var t = document.getElementById('toolt').title;
                t = data[x].time;

            message.setAttribute('class', 'chat-message');
            message.textContent = data[x].name + ': ' + data[x].message;

            // Append
            messages.appendChild(message);
            messages.insertBefore(message, info.firstChild);
            }
        }
    });
</script>

点击特定按钮，我需要传递按钮ID

<button id="20" class="click">Click me</button>
<button id="21" class="click">Click me</button>
<button id="22" class="click">Click me</button>

但是，应该使用JQuery ajax API。我的意思是，param不应该在URL中可见，因为每次我将更改myapp.com/mainpage.jsp?check=20 值时，此操作将刷新页面，我不需要它。我写了这样的代码：

check

最后，我添加了JSP代码

$(document).ready(function() {
                $(".btn-info").click(function() {
                    $.ajax({
                        url: "stuff",
                        type: "GET",
                        data:{ checkId: this.id },
                        success: function(response) {
                            console.log("success: " + response);
                        },
                        error: function(xhr) {
                            console.log("error exception: " + xhr);
                        }
                    });
                });
            });

当我按特定按钮点击时，例如按钮

My result: <%= request.getParameter("checkId") %>

在浏览器日志中，我看到一个值为20的html文档：

这是正确的！但是在页面上，这个值没有改变，仍然是null：

请你告诉我，为什么会这样，以及我做错了什么？

Answer 1

这不是你想要的真实方式。

首先，您应该将请求发送到servlet（doGet servlet方法）。 servlet会向你的jsp返回一个'response'值。然后在ajax函数的成功部分，您可以更改 True result

的值

$(document).ready(function() {
  $(".btn-info").click(function() {
    $.ajax({
      url: "stuff",
      type: "GET",
      data: {
        checkId: this.id
      },
      success: function(response) {
        console.log("success: " + response);
        $('#trueResult').html(response);
      },
      error: function(xhr) {
        console.log("error exception: " + xhr);
      }
    });
  });
});

True result <span id="trueResult"></span>