使用两个 SQL 表为 Javascript 获取 JSON 数据

Posted

技术标签:

【中文标题】使用两个 SQL 表为 Javascript 获取 JSON 数据【英文标题】:Using two SQL tables to fetch JSON data for Javascript 【发布时间】:2017-04-22 15:30:57 【问题描述】:

我正在使用 SQL 查询从数据库中获取数据并将其作为 JSON 数据返回以发送到 javascript 文件。我使用数据库中的两个不同表进行 SQL 查询。如何连接这两个表,或者我需要使用什么代码将两个表中的数据存储为一个 JSON 数据发送到 Javascript 文件?

我想返回要在 Javascript 文件的表格中显示的团队名称和省份名称。当我在 mysql Workbench 中使用它时,我正在使用的 SQL 查询获取正确的数据,但不适用于 Teams.php。我想在 Javascript 文件的 Teams 列中显示团队名称,在 Provinces 列中显示省份名称。

JSON 数据当前将 Teams.php 中的数据显示为 "teams":["name":"Ulster","name":"Ulster","name":"Ulster" ,"name":"Leinster"] 这是错误的,因为它只显示一个名称,并且它也获取错误的数据,因为它们是省名。

我希望它显示为 "teams":["name":"Donegal","province":"Ulster","name":"Derry","province":"Ulster" ,"name":"Down","province":"Ulster","name":"Dublin","province":"Leinster"] 因为它显示了球队名称和省份名称。

团队.html

<html>
<head>
<script type="text/javascript" src="Teams.js">
</script>
</head>
<body>
<h2>Teams</h2>
<table>
    <tr>
        <td>Enter team name: <input id="team" type="text" /></td>               
    </tr>
</table>
<hr>
<div id="myDiv"></div>
</body>
</html>

Teams.js

var xmlhttp;

window.onload=function()
    init();


function init()

    // call getAjaxData() as the user types text 
    document.getElementById("team").onkeyup=function()
        getAjaxData();
    


function getAjaxData()
   
    if (window.XMLHttpRequest)
    
        xmlhttp=new XMLHttpRequest();
    
    else
    
         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
       

    // put the text typed into a JavaScript variable 'teamname'
    var teamname=document.getElementById("team").value;
    console.log(teamname);

    xmlhttp.onreadystatechange = showData;
    // make Ajax request using the text typed OR you could first request "Teams.json"
    xmlhttp.open("GET","Teams.php?name="+teamname, true);
    xmlhttp.send(); 


function showData()

    if (xmlhttp.readyState==4 && xmlhttp.status==200)
               
        var data = JSON.parse(xmlhttp.responseText);        

        // build a html table with the data returned
        var output = '<table border=1>';
        output += '<th>Team</th><th>Province</th>';

        for (var i=0;i<data.teams.length;i++)          
            output += '<tr><td>'+ data.teams[i].name +'</td><td>' + data.teams[i].province +'</td></tr>';
        
        output += '</table>';

        // add output to div
        document.getElementById("myDiv").innerHTML=output;
    

团队.php

<?php
$team=$_GET['name'];

$connection = mysqli_connect("localhost","root","");
mysqli_select_db($connection,"gaadb");

// I'd recommend finding just the team names first.
$result = mysqli_query($connection,"SELECT t.name, p.name FROM teams AS t, provinces AS p WHERE p.id = t.province AND t.name like '$team%'");

$rs = array();
$i=0;
while($rs[] = mysqli_fetch_assoc($result)) 

mysqli_close($connection);
unset($rs[count($rs)-1]);  //removes a null value
print(" \"teams\":" . json_encode($rs) . " ");
?>

【问题讨论】:

【参考方案1】:

@GleneaMan 首先关注您的SQL 查询。您的团队表必须具有省 id,以便代表province_id 您可以正确使用两个表的join

其次,您必须相应地操作 json 数据。

在您当前的查询数据中,省份名称与团队数量重复。

【讨论】:

以上是关于使用两个 SQL 表为 Javascript 获取 JSON 数据的主要内容,如果未能解决你的问题,请参考以下文章

我的 SQL 创建表为语法错误 [重复]

sql WordPress + WPML:这将两个缺少的列添加到wp_icl_strings(导致WPML字符串翻译表为EMPTY)

请教SQL Server 高手

获取 SQL Server 图形数据库中的所有好友

SQL Server 导出表为 csv或txt

SQL - 内连接 2 个表,但如果 1 个表为空,则返回所有表