如何从控制器获取 AJAX 响应到 jsp答案

【问题标题】：How to get an AJAX response from controller to jsp如何从控制器获取 AJAX 响应到 jsp
【发布时间】：2019-08-13 23:18:39
【问题描述】：

我有一个 Spring Boot 应用程序，我想从搜索页面 (jsp) 调用控制器，通过 AJAX 获取响应并在 jsp 中更新。现在在进行提交调用时，我什么也没得到。（补充一点，如果我对控制器进行休息 api 调用，我会收到来自 db 的响应，即http://localhost:8080/problems/{problemId}）。基本上我需要知道如何结合从 ui 到 api 的响应。请建议是否要添加任何映射或绑定变量。

我的jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%@ include file = "header.jsp" %>
    <div>
        <div>
            <h1>Lookup from Oracle database</h1>
        </div>
        <div>
        <h2>${message}</h2>

        <td>Search Category:</td>
        <td>
            <select name="searchcategories">
            <option value="-1">-Select Category-</option>
            <option value="problem">problem</option>
            <option value="attachment">attachment</option>
            <option value="tstt">tstt</option>  
            </select>
        </td>
        <td>Entity Id:</td>
        <input type="text" name="problemId" id="search_data"  class="form-control" placeholder="Search problem no..">
        <button type="submit" id="submit_btn" onclick="">Search</button>

        </div>
    </div>

    <%@ include file = "footer.jsp" %>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function()
     {
     $('#submit_btn').click(function(){
    var problemId = $('#search_data').val();

    $.ajax({
        type: "GET",
        dataType : "json",
        url : "http://localhost:8080/problems/" + problemId,
        success : function(data) {
            /* $("#response").html(data);  */
            var parsed_data = JSON.parse(data);
            console.log(parsed_data.success);
        }

    });
    return data;
    });
    });

    $("form").submit(function(){
          alert("Submitted");
        });


</script>
</html>

我的控制器类（当我通过休息直接调用时给出响应，即http://localhost:8080/problems/{problemId}）：

@RestController
@RequestMapping("/problems")
public class BugController {

    @Autowired
    BugRepository problemRepository; 

    @GetMapping("/{problemId}")
     public Bug getProblemById(@PathVariable Long problemId) {
      return problemRepository.findByProblemId(problemId);
     }
}

期望 jsp 调用控制器，通过发送正在搜索的参数并将响应返回给 jsp enter image description here

【问题讨论】：

您的网络标签是否显示正在拨打的电话？还有一件事是你的 ajax 调用无论如何都没有被使用
这是我在点击检查元素中的提交按钮时得到的“加载资源失败：服务器响应状态为 500 ()”。我不是 UI 专家，但正在研究一些 POC。让我知道更多关于我应该做什么。
我可以调用控制器，但没有得到响应，请建议（我猜它必须与 return 做一些事情）： $.ajax({ type: "GET", dataType : "json", url : "localhost:8080/problems" + questionId, 成功: function(data) { $("#response").html(data); } });返回数据；
用您更新的结构化代码更新您上面的帖子。问题 ID 是否在 Ajax 调用之前正确设置？
嗨 Edwin，更新了主要部分中的代码，无法通过在 cmets 中点击“ENTER”来进行格式化......无论如何我遇到了一些脚本错误，调用将转到 db 并执行休眠查询，我可以用邮递员回复。添加了问题的图片，“ReferenceError: Can't find variable: data”和“SyntaxError: JSON Parse error: Unexpected identifier "object""

标签： javascript java ajax spring-boot spring-mvc

【解决方案1】：

您上传的图片显示错误状态 500（内部服务器错误）。这意味着 您的服务器端代码有问题。 例如，您的数据库查找查询可能存在问题。异常堆栈跟踪可以帮助您调试和查找服务器端问题。

但是您的 ajax 代码也存在客户端问题。您应该使用此模式向服务器发送 ajax 请求：

  $.ajax({
    headers: {
        Accept: "application/json; charset=utf-8",
        "Content-Type": "application/json; charset=utf-8"
    },
    type: "GET",
    dataType : "json",
    url : "http://localhost:8080/problems/" + problemId
    success: function(data) {
       //data is in json format. You can log it and use it's properties.
    }
});

【讨论】：

嗨 Hemed，更新了主要部分中的代码，无法通过在 cmets 中点击“ENTER”来进行格式化......无论如何我遇到了一些脚本错误，调用将转到 db 并执行休眠查询，我可以用邮递员回复。添加了问题的图片，“ReferenceError: Can't find variable: data”和“SyntaxError: JSON Parse error: Unexpected identifier "object""

【解决方案2】：

一般不建议在 head 和 body 标签之外有任何 HTML 代码，除了 doctype 和 html 包装元素。这可能会导致意想不到的问题。

jQuery ajax 方法参数对象支持回调属性success、error 和complete。目前您的代码似乎开始向您的后端发出 AJAX 请求，但它不处理响应数据。

Here 是 jQuery ajax 方法文档的链接。

【讨论】：