Spring MVC与jQuery GET请求问题：AJAX报错及函数位置咨询

首先，先帮你梳理下代码里的潜在问题，再回答函数放置位置的疑问：

一、先抓AJAX的语法/逻辑坑 #

你贴的代码里有几个容易踩的点，可能就是报错的原因：

• data参数的写法：你用了data: "k=" + keyword手动拼接参数，虽然GET请求这么写能跑，但如果关键词里有空格、中文或者特殊字符（比如&），会直接导致参数传递错误。更稳妥的方式是用对象形式，jQuery会自动帮你做URL编码：

  data: { k: keyword }
  

• 缺失error回调：你只写了success，但没加error回调！这就像开车没装后视镜，出问题根本不知道为啥。一定要加上，能直接在控制台看到错误原因：

  $.ajax({
    type: "GET",
    data: { k: keyword },
    url: "http://localhost:8080/keyword",
    dataType: "json",
    success: function(data){
      // 这里补全你的逻辑：把ID追加到#test
      // 举个例子：
      data.forEach(item => {
        $("#test").append(`<div>${item.id}</div>`);
      });
    },
    // 新增error回调，抓错误
    error: function(xhr, status, err){
      console.log("请求炸了：", status, err);
      console.log("后端返回内容：", xhr.responseText);
    }
  });
  

  另外，你代码里的success: function(data){...}如果实际代码里...后面没写闭合的}和)，那绝对会触发语法错误，得检查括号是否配对完整。

• JSON解析失败：如果后端返回的不是合法的JSON格式，jQuery会直接触发error。可以在Network面板里看请求的响应内容，确认是不是标准JSON。

二、函数该放$(document).ready()里还是外？ #

分两种情况：

1. 如果是用HTML onclick触发（比如<button onclick="keyword()">）：
   这个函数得暴露在全局作用域里，要么直接写在ready外面，要么在ready内部把函数挂到window上：

   $(document).ready(function(){
     window.keyword = function(){
       // 你的AJAX代码
     };
   });
   

   不然HTML里的onclick找不到这个函数。

2. 更推荐的方式：用jQuery绑定事件：
   完全不用全局函数，把所有逻辑都塞到ready里，比如给按钮绑定点击事件：

   $(document).ready(function(){
     $("#你的按钮ID").click(function(){
       var keyword = $("#item-name-form-keyword").val();
       // 这里写AJAX代码
     });
   });
   

   这种方式不会污染全局变量，代码更干净，也是jQuery的最佳实践。

三、快速调试步骤 #

1. 按F12打开开发者工具，看Console面板有没有红底的语法错误；
2. 切到Network面板，看请求的状态码：4xx是前端参数问题，5xx是后端报错，200但报错大概率是JSON格式不对；
3. 先把keyword变量用console.log(keyword)打出来，确认拿到的是你输入的值。

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