使用 jquery get 填充 HTML 表答案

【问题标题】：Populate HTML table with jquery get使用 jquery get 填充 HTML 表
【发布时间】：2017-09-26 03:24:01
【问题描述】：

大家早上好，我执行 php mysqli 以获取 sql 中的前 5 个计数国家。然后我使用 jquery get 从 php 脚本中获取数据。最后，我想用 get jquery 填充 HTML 表。我只会得到 5 个国家，但是我尝试用这些数据填充 html 表，输出如下所示。

malaysia united states united kindgom singapore netherlands

gettopfive.php

<?php

        include 'config.php';
        $con = mysqli_connect ($dbhost, $dbusername, $dbpassword) or die ('Error in connecting: ' . mysqli_error($con));

        //Select the particular database and link to the connection
        $db_selected = mysqli_select_db($con, $dbname ) or die('Select dbase error '. mysqli_error());
        //Make A SQL Query and link to the connection

        $topfivecountries = mysqli_query($con,"SELECT `country.src` FROM `attackview` WHERE `device.type`='snort' AND `country.src` IS NOT NULL GROUP BY `country.src` ORDER by count(*) DESC LIMIT 5");
        while ($row = mysqli_fetch_assoc($topfivecountries))
        {
            echo $row["country.src"]. "\n";
        }
        mysqli_free_result($topfivecountries);
        mysqli_close($con);

?>

php 脚本的输出

malaysia 
united states 
united kindgom 
singapore 
netherlands

jquery 获取 app.js

$.get({
            url: 'gettopfive.php',
            dataType: 'text',
            success: gettopfive
        });

function getfive(val) {
        $('#getfive').html(val);
    }

html代码

<script src="js/app.js"></script>
<table id="getfive">
<tr><td></td><tr>
<tr><td></td><tr>
<tr><td></td><tr>
<tr><td></td><tr>
<tr><td></td><tr>
</table>

我的输出不是我想要的我想要这样的东西。

malaysia 
united states
 united kindgom 
singapore
 netherlands

获取数据的方法是否正确？？？如果是错误的，请向我解释如何做？谢谢。。

【问题讨论】：

你能把php脚本的输出（数据库调用）贴在这里，这样我就可以从那里工作了吗？
我认为你最好使用$.load() 来完成你的需求，而不是$.get()
@sbr 我已经更新了。你可以在上面检查
@Azhar 只是为了确认结果是多行字符串，对吗？
@TaufikNurRahmanda，我想知道你为什么建议使用 $.load() 而不是 $.get()

标签： javascript php jquery html

【解决方案1】：

通过从字符串创建国家/地区数组来扩展@nirnay 的答案。还修复了回调函数名称。

   $.get({
        url: 'gettopfive.php',
        dataType: 'text',
        success: getfive
    });

    function getfive(val) {
        var countryArray = val.split('\n');
        countryArray.forEach(function(country){
            $('#getfive').append('<tr><td>'+country+'</td></tr>') 
        });
    }

【讨论】：

你是从哪里得到“国家”的
@Azhar country 是由 forEach 传递给回调函数的参数。所以你不需要声明它。

【解决方案2】：

只有在 ajax 请求成功后，您才必须从脚本生成表格。将您的结果作为数组而不是字符串发送。从 html 中删除表格并放置一个 id 为“结果”的 div，您可以在其中显示结果。

把你的$('#getfive').html(val);改成

$('#result').html('<table id="getfive"></table>'); 
    result.forEach(function(item) { 
    $('#getfive table').append('<tr><td>'+item+'</td></tr>') 
});

【讨论】：

大家好，我输入了这样的代码 function gettopfive(val) { $('#result').html('
'); result.forEach(function(item) { $('#getfive table').append(''+item+'') }); }
然后我得到一个错误，指出 result.foreach 不是函数
你能向我解释一下foreach的结果代表什么
@Azhar forEach 适用于数组。它将为数组中的每个条目执行代码块。由于没有称为结果的数组，因此您收到错误消息。有关 forEach 的更多信息，请阅读此developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…