在此处输入图像描述在此处输入图像描述如何在 jsp 屏幕中从 db(map(呈现 ajax 响应
我在浏览器控制台中得到响应，但不确定如何在浏览器屏幕上以 jsp 格式呈现它，例如表格或任何更好的建议
$('#submit_btn').click(function(){
var problemId = $('#search_data').val();
$.ajax({
type: "GET",
dataType : "json",
url : "http://localhost:8080/bugs/" + bugId,
success: function(data){
$("#response").html(data);
console.log('response data',data);
},
error : function(err){
console.log('error',err)
}
});
});
.JSP
<body>
<div>
<div>
<h1>Lookup from Oracle database</h1>
Click on this <strong><a href="/success.jsp">link</a></strong> to visit home page.
</div>
<div>
<h2>${message}</h2>
<table>
<tr>
<td>Search Category:</td>
<td>
<select name="searchcategories">
<option value="-1">-Select Category-</option>
<option value="bug">bug</option>
<option value="attachment">attachment</option>
</select>
</td>
</tr>
<tr>
<td>Entity Id:</td>
<td><input type="text" name="bugId" id="search_data" class="form-control" placeholder="Search bug no..">
</td>
</tr>
<tr>
<td></td>
<td><button type="button" id="submit_btn" onclick="">Search</button>
</td>
</tr>
<tr>
<td>Bug Id:</td>
<td><input type="text" id="bugId" class="form-control">
</td>
</tr>
<tr>
<td>Prob State Name:</td>
<td><input type="text" id="probStateName" class="form-control">
</td>
</tr>
<tr>
<td>Priority Name:</td>
<td><input type="text" id="priorityName" class="form-control">
</td>
</tr>
</div>
</div>
</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 bugId = $('#search_data').val();
$.ajax({
type: "GET",
dataType : "json",
url : "http://localhost:8080/bugs/" + bugId,
success: function(data){
$("#response").html(data);
console.log('response data',data);
var bugDetails = data;
renderDetails(data);
},
error : function(err){
console.log('error',err)
}
});
});
function renderDetails(data)
{
var id = document.getElementById("bugId");
var name = document.getElementById("probStateName");
var priority = document.getElementById("priorityName");
id.innerHTML = data.bugId;
name.innerHTML = data.probStateName;
priority.innerHTML = data.priorityName;
};
</script>
</html>
下面是我在控制台中看到的响应对象，其中包含从后端获取的数据。我想在搜索框下方呈现这个 ajax 响应
[日志] 响应数据(预言机查找，第 65 行(对象
data： {bugId： 298， stateCode： "2"， ...}
对象原型
您可以通过以下代码将数据填充到任何字段。可能最好还添加一个检查以查看返回的值是否不为空。
<script type="text/javascript">
var bugDetails;
$(document).ready(function(){
$("#submit_btn").click(function(event){
event.preventDefault();
var bugId = document.getElementById("search_data").value;
$.ajax({
type: 'GET',
url: "http://localhost:8080/bugs/" + bugId,
dataType: 'json',
success: function(data, textStatus, jqXHR) {
bugDetails = data;
renderDetails(bugDetails);
alert(data);
alert(jqXHR.status);
alert(textStatus);
},
error: function(jqXHR, textStatus, errorThrown) {
alert(textStatus);
alert(jqXHR.status);
alert(errorThrown);
}
});
});
});
function renderDetails(bugs)
{
var id = document.getElementById("problemId");
var name = document.getElementById("probStateName");
var priority = document.getElementById("priorityName");
id.value = bugs.bugId;
name.value = bugs.probStateName;
priority.value = bugs.priorityName;
};
</script>
所以现在你的代码应该是这样的，
<body>
<div>
<div>
<h1>Lookup from Oracle database</h1>
Click on this <strong><a href="/success.jsp">link</a></strong> to visit home page.
</div>
<div>
<h2>${message}</h2>
<table>
<tr>
<td>Search Category:</td>
<td>
<select name="searchcategories">
<option value="-1">-Select Category-</option>
<option value="bug">bug</option>
<option value="attachment">attachment</option>
</select>
</td>
</tr>
<tr>
<td>Entity Id:</td>
<td><input type="text" name="bugId" id="search_data" class="form-control" placeholder="Search bug no..">
</td>
</tr>
<tr>
<td></td>
<td><button type="button" id="submit_btn">Search</button>
</td>
</tr>
<tr>
<td>Bug Id:</td>
<td><input type="text" id="problemId" class="form-control">
</td>
</tr>
<tr>
<td>Prob State Name:</td>
<td><input type="text" id="probStateName" class="form-control">
</td>
</tr>
<tr>
<td>Priority Name:</td>
<td><input type="text" id="priorityName" class="form-control">
</td>
</tr>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
var bugDetails;
$(document).ready(function(){
$("#submit_btn").click(function(event){
event.preventDefault();
var bugId = document.getElementById("search_data").value;
$.ajax({
type: 'GET',
url: "http://localhost:8080/bugs/" + bugId,
dataType: 'json',
success: function(data, textStatus, jqXHR) {
bugDetails = data;
renderDetails(bugDetails);
alert(data);
alert(jqXHR.status);
alert(textStatus);
},
error: function(jqXHR, textStatus, errorThrown) {
alert(textStatus);
alert(jqXHR.status);
alert(errorThrown);
}
});
});
});
function renderDetails(bugs)
{
var id = document.getElementById("problemId");
var name = document.getElementById("probStateName");
var priority = document.getElementById("priorityName");
id.value = bugs.bugId;
name.value = bugs.probStateName;
priority.value = bugs.priorityName;
};
</script>
</html>
我创建了Text Fields来获取来自AJAX调用的数据。确保您使用的是这些ids。
<tr>
<td>Bug Id:</td>
<td><input type="text" id="problemId" class="form-control">
</td>
</tr>
<tr>
<td>Prob State Name:</td>
<td><input type="text" id="probStateName" class="form-control">
</td>
</tr>
<tr>
<td>Priority Name:</td>
<td><input type="text" id="priorityName" class="form-control">
</td>
</tr>
当数据来自AJAX调用时，它将使用此方法获取到上面的字段，
function renderDetails(bugs)
{
var id = document.getElementById("problemId");
var name = document.getElementById("probStateName");
var priority = document.getElementById("priorityName");
id.value = bugs.bugId;
name.value = bugs.probStateName;
priority.value = bugs.priorityName;
};
因此，您需要关心的是确保文本字段 ID 正确无误。