使用jquery get填充HTML表

时间:2017-09-26 03:24:01

标签: javascript php jquery html

早上好, 我执行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 get 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

获取数据是否正确???如果是错误的心灵解释我怎么办?谢谢..

2 个答案:

答案 0 :(得分:0)

只有在ajax请求成功后,才必须从脚本生成表。将您的结果作为ARRAY发送,而不是作为STRING。从html中删除表格,并将ID为div的div设为&#39;结果&#39;你可以在其中向你展示结果。

将您的$('#getfive').html(val);更改为

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

答案 1 :(得分:0)

通过从字符串创建国家/地区数组来扩展@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>') 
        });
    }