想请教一下 js 如何获取<p id="">中 id 的内容并请求指定地址获取返回数据赋值给 p 标签?

2022-09-08 17:52:01 +08:00
 hiugo

栗子:

<p id="114514"></p>

接口是https://aaa.com/name?=114514 返回数据是 “田所浩二” 那么应该怎么让js携带id中的参数去请求https://aaa.com/name?=114514 然后把返回的“田所浩二”赋值给p 标签

有大佬能给个栗子吗? 接口是 https://bilibili.vuplive.com/name.php?uid=114514

973 次点击
所在节点    问与答
7 条回复
zcf0508
2022-09-08 18:03:39 +08:00
const nodes = document.querySelectorAll('p')

nodes.map((node)=>{

const id = node.id
// 请求拿数据

node.innerText = "结果"

})
Mexion
2022-09-08 18:06:09 +08:00
先获取到这个 id:
const el = document.querySelector("p");
const id = el.id;
然后直接请求替换就行了:
fetch(`https://bilibili.vuplive.com/name.php?uid=${id}`).then(res => res.text()).then(res => p.innerText = res);
Mexion
2022-09-08 18:08:46 +08:00
打错了,应该是:
el.innerText
多个的话就按一楼那样遍历就行了
thefck
2022-09-08 18:14:35 +08:00
document.querySelectorAll('p').forEach(function(node){
if(node.id){
var xhr = new XMLHttpRequest();
xhr.open('get', 'https://bilibili.vuplive.com/name.php?uid='+node.id);
xhr.onreadystatechange = function () {
if (xhr.readyState !== 4) return;
if (xhr.status === 200) {
node.innerText = xhr.responseText
}
};
xhr.send();
}
})
cmdOptionKana
2022-09-08 18:15:55 +08:00
拿到 id 后,用 fetch 或 axios 向接口发请求即可获得返回数据,然后用 innerText 或 jquery 修改网页即可。

而怎么拿到 id ,就要找规律了,比如是不是整个网页只有一个 <p>, 或者是不是有一堆 <p> 在某个 <div> 内等等。
hiugo
2022-09-08 18:26:27 +08:00
@thefck
![90xnR.png]( https://s1.328888.xyz/2022/09/08/90xnR.png)

好像没法在 wikijs 上用
wdssmq
2022-09-11 18:44:15 +08:00
document.querySelectorAll('p') 拿到的东西并不能直接遍历,是 NodeList

@thefck
@yuner4827

然后,看截图是个文本编辑器,源码下只是个字符串,渲染后也是在 iframe 内的(以一般富文本编辑器而论),也并不和真正的文本框双向绑定;

以一般编辑器的机制,所见即所得模式下输入:

[id:114514]

JS 提取文本框内容,解析识别后调用 API 写入回去可能更合理,如果有暴露 API 的话;

这可能已经不是交流层面的问题了,,建议直接外包。。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/878695

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX