Javascript 将数据发送到另一个html文件
我试图从我的1 HTML页面上的数据库中获取某些数据，并将其显示在2 HTML页面上 我的1个html文件的代码：Javascript 将数据发送到另一个html文件,javascript,html,database,frontend,Javascript,Html,Database,Frontend,我试图从我的1 HTML页面上的数据库中获取某些数据，并将其显示在2 HTML页面上 我的1个html文件的代码： <html> <head> <script src="example.js"></script> </head> <body> . . . <button item="' + count + '" onclick="getData(this)">Examp
<html>
<head>
<script src="example.js"></script>
</head>
<body>
.
.
.
<button item="' + count + '" onclick="getData(this)">Example</button>
.
.
.
</body>
</html>
<html>
<head>
<script src="example.js"></script>
</head>
<body>
<h4 id="data1"></h4>
<h4 id="data2"></h4>
</body>
</html>
对不起，我是新手，所以详细解释一下你的解决方案会很有帮助。我只使用vanilla JS，所以请不要使用jQuery。任何帮助都将不胜感激我希望这对你有用。按钮已将自定义项属性替换为等效的数据集，以确保html有效。通常我建议也使用外部事件处理程序，而不是将onclick=getdata添加到内联元素中，但为了简洁起见，它们保留在这里，将构造相关的查询字符串以发送到端点，它将是/theroute？id=X&name=Y&age=Z等，用于查询数据库并将响应发送回。响应用于生成超链接菜单，当用户单击时，超链接菜单会将用户带到第2页。我想这就是你想解释的。您可以复制整个代码，并创建一个新页面以查看操作
<?php
if( $_SERVER['REQUEST_METHOD']=='GET' && !empty( $_GET['item'] ) ){
ob_clean();
/*
emulate "/theroute" and send some data back to the ajax callback.
This data would really be fetched from the database but below is
simply randomly generated data for display/test purposes.
*/
$payload=[];
$item=$_GET['item'];
for( $i=0; $i < 10; $i++ ){
$payload[]=[
'id' => $i,
'name' => 'Geronimo '.uniqid().' '.$item,
'age' => mt_rand(16,80)
];
}
exit( json_encode( $payload ) );
}
?>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
<script>
function getData( e ) {
var xhr = new XMLHttpRequest();
var ul=document.getElementById('menu');
/* The above PHP code is to emulate the real endpoint /theroute */
xhr.open( "GET", location.href +'?task=fetch&item='+e.target.dataset.item, true );
xhr.setRequestHeader( "Content-Type", "application/json" );
xhr.onload = function() {
var json = JSON.parse( xhr.response );
json.forEach(obj=>{
var id=obj.id;
var name=obj.name;
var age=obj.age;
var li=document.createElement('li');
li.appendChild( createhyperlink(id,name,age) );
ul.appendChild( li );
});
}
xhr.send();
}
function createhyperlink(id,name,age){
var a=document.createElement('a');
a.href='page2.html?id='+id+'&name='+name+'&age='+age;
a.innerHTML='View '+name;
return a;
}
</script>
</head>
<body>
<ul id='menu'></ul>
<?php
for( $i=1; $i <=10; $i++ ){
echo "<button data-item='{$i}' onclick='getData(event)'>Example #{$i}</button>";
}
?>
</body>
</html>
上面的片段有点不清楚。您是否使用服务器端语言和数据库生成初始HTML？php和mysql可能您不能有两个具有相同ID的元素，您不能将ajax调用的响应发送到另一个HTML页面，并希望下次查看时它会出现……对不起，对于ID部分，这是一个输入错误。是的，我正在尝试从mysql数据库获取数据。从数据库获取数据以显示在同一页面上？这很容易。获取数据以显示在与发出请求的页面不同的另一个页面上是一个完全不同的问题，不会这样做。请澄清哪些人正在获取数据以显示在另一页上。谁将看到另一页上的数据？那个人会同时出现在这两个页面上吗？很抱歉，我只使用vanilla JS。上面是vanilla javascripti我的案例中没有可用的php OK-php并不重要。我在这里使用PHP只是为了创建最初的HTML按钮，并处理ajax请求，这可能是我不知道的、未公开的其他服务器端语言。。。重要的一点是处理ajax响应，并创建合适的链接，将用户带到第2页，以防延迟回复，让我们在中讨论
<?php
if( $_SERVER['REQUEST_METHOD']=='GET' && !empty( $_GET['item'] ) ){
ob_clean();
/*
emulate "/theroute" and send some data back to the ajax callback.
This data would really be fetched from the database but below is
simply randomly generated data for display/test purposes.
*/
$payload=[];
$item=$_GET['item'];
for( $i=0; $i < 10; $i++ ){
$payload[]=[
'id' => $i,
'name' => 'Geronimo '.uniqid().' '.$item,
'age' => mt_rand(16,80)
];
}
exit( json_encode( $payload ) );
}
?>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
<script>
function getData( e ) {
var xhr = new XMLHttpRequest();
var ul=document.getElementById('menu');
/* The above PHP code is to emulate the real endpoint /theroute */
xhr.open( "GET", location.href +'?task=fetch&item='+e.target.dataset.item, true );
xhr.setRequestHeader( "Content-Type", "application/json" );
xhr.onload = function() {
var json = JSON.parse( xhr.response );
json.forEach(obj=>{
var id=obj.id;
var name=obj.name;
var age=obj.age;
var li=document.createElement('li');
li.appendChild( createhyperlink(id,name,age) );
ul.appendChild( li );
});
}
xhr.send();
}
function createhyperlink(id,name,age){
var a=document.createElement('a');
a.href='page2.html?id='+id+'&name='+name+'&age='+age;
a.innerHTML='View '+name;
return a;
}
</script>
</head>
<body>
<ul id='menu'></ul>
<?php
for( $i=1; $i <=10; $i++ ){
echo "<button data-item='{$i}' onclick='getData(event)'>Example #{$i}</button>";
}
?>
</body>
</html>