Question

我有一个Spring Boot应用程序，我想从搜索页面（jsp）调用控制器，获取响应并通过AJAX在jsp中进行更新。现在，在进行提交呼叫时，我什么也没收到。（此外，如果我对控制器进行rest api调用，则会从数据库得到响应，即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

Answer 1

通常不建议在 head 和 body 标记之外使用HTML代码，但 doctype 和 html 包装器元素。这可能会导致意外的问题。

jQuery ajax 方法参数对象支持回调属性成功，错误和 complete 。目前，您的代码似乎向后端启动了AJAX请求，但它不处理响应数据。

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

Answer 2

您上传的图像显示错误状态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.
    }
});

如何从控制器到JSP获取AJAX响应

2 个答案: