html - 使用Ajax Get方法在前端检索Mongodb数据
问题描述
我在 mongodb 中插入了一个数据并使用 nodejs 编写 API,需要使用 jquery 在前端检索这些数据。我在 mongodb 中插入了 3 行数据。我使用下面的代码来获取数据,它工作正常,但它是硬编码的。我希望它使用 jquery 手动发生。请帮助解决这个问题。
$.ajax({
dataType:"json",
url: "/purchaser/purchasersList",
type:"GET",
global:false,
async:false,
success: function(response){
console.log("response is:",response);
document.getElementById("userName").innerHTML = (response[0].userName);
document.getElementById("email_id").innerHTML=(response[0].email_id);
document.getElementById("address").innerHTML=(response[0].address);
document.getElementById("phoneNumber").innerHTML=(response[0].phoneNumber);
//2nd row data
document.getElementById("userName1").innerHTML = (response[1].userName);
document.getElementById("email_id1").innerHTML=(response[1].email_id);
document.getElementById("address1").innerHTML=(response[1].address);
document.getElementById("phoneNumber1").innerHTML=(response[1].phoneNumber);
//3rd row data
document.getElementById("userName2").innerHTML = (response[2].userName);
document.getElementById("email_id2").innerHTML = (response[2].email_id);
document.getElementById("address2").innerHTML = (response[2].address);
document.getElementById("phoneNumber2").innerHTML =(response[2].phoneNumber);
},
error: function (jqXHR, textStatus, errorThrown) { // error callback
console.log("Error Response jqXHR is:" + jqXHR);e
<table class = table2>
<tr>
<th style="text-align:center">SL.No</th>
<th style="text-align:center">Purchaser Name</th>
<th style="text-align:center">Email</th>
<th style="text-align:center">Address</th>
<th style="text-align:center">Phone No</th>
</tr>
<tr>
<td height="50">1</td>
<td height="50" id="userName"></td>
<td height="50" id="email_id"></td>
<td height="50" id="address"></td>
<td height="50" id="phoneNumber"></td>
<td height="50">Active</td>
</tr>
<tr>
..
</tr>
解决方案
如果您可以将 id 更改为 class,那么我鼓励您尝试以下操作:
$.each(response,function(i) {
var tr = $('.table2 tr').eq((i+1));
$(tr).find(".userName").text(response[i].userName)
$(tr).find(".email_id").text(response[i].email_id)
$(tr).find(".address").text(response[i].address)
$(tr).find(".phoneNumber").text(response[i].phoneNumber)
})
注意我无法测试它,因为我没有你的回复。
完整代码
$.ajax({
dataType: "json",
url: "/purchaser/purchasersList",
type: "GET",
global: false,
async: false,
success: function(response) {
$.each(response,function(i) {
var tr = $('.table2 tr').eq((i+1));
$(tr).find(".userName").text(response[i].userName)
$(tr).find(".email_id").text(response[i].email_id)
$(tr).find(".address").text(response[i].address)
$(tr).find(".phoneNumber").text(response[i].phoneNumber)
})
},
error: function(jqXHR, textStatus, errorThrown) { // error callback
console.log("Error Response jqXHR is:" + jqXHR);
e
<table class=table2>
<tr>
<th style="text-align:center">SL.No</th>
<th style="text-align:center">Purchaser Name</th>
<th style="text-align:center">Email</th>
<th style="text-align:center">Address</th>
<th style="text-align:center">Phone No</th>
</tr>
<tr>
<td height="50">1</td>
<td height="50" class="userName"></td>
<td height="50" class="email_id"></td>
<td height="50" class="address"></td>
<td height="50" class="phoneNumber"></td>
<td height="50">Active</td>
</tr>
<tr>
..
</tr>
推荐阅读
- html - 溢出换行:断词与断词:断词
- html - 在 SVG 中 - 如何在不使用 javascript 的情况下加速动画或更改其持续时间?
- vb.net - 如何跳过 DateTime 转换?
- typescript - 打字稿无法识别条件
- tensorflow - 使用样本权重对占主导地位的类进行负加权(语义分割)
- python - 用 Python 的 urllib 复制 wget 命令?
- google-maps - 如何从纬度和经度获取位置名称我从谷歌地理编码器获取并显示在使用应用程序脚本完成的网络应用程序中
- java - 使用 Jackson 反序列化复杂的嵌套 Json
- javascript - 为什么打字稿不缩小 forEach 循环中的类型?
- database - 哪个千分尺度量更适合计算找到的数据库值?