#javascript #java #ajax #spring-boot #spring-mvc
#javascript #java #ajax #весенняя загрузка #spring-mvc
Вопрос:
У меня есть приложение spring boot, я хочу выполнить вызов со страницы поиска (jsp) к контроллеру, получить ответ и обновить в jsp с помощью AJAX. Прямо сейчас при выполнении вызова submit я ничего не получаю. (чтобы добавить, если я выполняю вызов rest api к контроллеру, я получаю ответ из базы данных, т.е.http://localhost:8080/problems /{problemID}). В принципе, мне нужно знать, как объединить ответ от пользовательского интерфейса к 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>
мой класс контроллера (выдает ответ при вызове напрямую через rest, т.е.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
введите описание изображения здесь
Комментарии:
1. Отображается ли на вашей вкладке network выполняемый вызов? Еще одна вещь заключается в том, что ваш ajax-вызов в любом случае не используется
2. Это то, что я получаю «Не удалось загрузить ресурс: сервер ответил со статусом 500 ()» при нажатии кнопки отправки в элементе проверки. Я не эксперт по пользовательскому интерфейсу, но работал над некоторым POC. Дайте мне знать немного больше о том, что я должен делать.
3. Я могу вызвать контроллер, но не получаю ответ обратно, пожалуйста, предложите (я предполагаю, что это должно что-то делать с возвратом): $.ajax({ тип: «GET», тип данных: «json», url: » localhost: 8080 / problems » problemID, успех: функция (данные) { $ («#response»).html (data); } }); возвращать данные;
4. Обновите свой пост выше своим обновленным и структурированным кодом. Правильно ли задается идентификатор проблемы перед вызовом Ajax?
5. ПРИВЕТ, Эдвин, обновил код в главном разделе, не удается выполнить форматирование, нажав «ENTER» в комментариях …. в любом случае я получаю некоторую ошибку скрипта, вызов отправляется в db и выполняется запрос гибернации, я могу ответить с помощью postman. Добавлено изображение проблемы «Ошибка ссылки: не удается найти переменную: данные» и «Ошибка синтаксического анализа JSON: неожиданный идентификатор «object»»
Ответ №1:
Обычно не рекомендуется иметь какой-либо HTML-код за пределами тегов head и body, за исключением doctype и элемента-оболочки html. Это может вызвать неожиданные проблемы.
Объект параметра метода jQuery ajax поддерживает свойства обратного вызова success, error и complete. На данный момент ваш код, похоже, запускает AJAX-запрос к вашему бэкэнду, но он не обрабатывает данные ответа.
Здесь приведена ссылка на документацию по методу jQuery ajax.
Ответ №2:
Ваше загруженное изображение показывает статус ошибки 500 (внутренняя ошибка сервера). Это означает, что что-то не так с вашим кодом на стороне сервера.Может быть, проблема с вашим запросом поиска в базе данных, например. Исключение stacktrace может помочь вам отладить и найти проблему на стороне сервера.
Но есть также проблема на стороне клиента с вашим ajax-кодом. Вы должны использовать этот шаблон для отправки запроса rest 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.
}
});
Комментарии:
1. ПРИВЕТ, Хэмед, обновил код в главном разделе, не удается выполнить форматирование, нажав «ENTER» в комментариях …. в любом случае я получаю некоторую ошибку скрипта, вызов отправляется в db и выполняется запрос гибернации, я могу ответить с помощью postman. Добавлено изображение проблемы «Ошибка ссылки: не удается найти переменную: данные» и «Ошибка синтаксического анализа JSON: неожиданный идентификатор «object»»