Question

我从数据库中检索一些值并将它们保存在文件中。我在每个li元素中都有一个带有id的列表。

当我点击一个元素时，我想要从文件中追加等于我刚刚点击的id的行。

我有一个例子：

 <li id="test1">just test </li>

文件中的一行中有test1个值。我想点击它时附加它的值。

$(document).ready(function() {


            $.get("serverResource", function(data){
                        $('#test1').click(function()    {
                                   $('#test1').append(data);
                    });

问题是data包含整个文件数据而不仅仅是一行。如何从文件中获取一行，然后使用id检查值，如果它是真的追加它？

Answer 1

如果您的测试数据如下所示：

test1
test2
test3
test4

和第X行对应li X，那么你可以通过分割行然后插入数据来读取你在javascript数组中通过AJAX加载的文件的内容：

    <html>
        <head>
            ...
            <script type="text/javascript">
                $(document).ready(function() {                                 
                    $.get('my_data.txt', function(data) {
                        var lines = data.split("\n");

                        $('#root li').click(function() {
                            var li = $(this);
                            // find position of the li in the containing ul
                            // and append the line to the li
                            var index = $('#root li').index(li);
                            li.append(lines[index]);
                        });
                    });                        
                });
            </script>
        </head>
        <body>
            <ul id="root">
                <li id="test1">Content 1</li>
                <li id="test2">Content 2</li>
                <li id="test3">Content 3</li>
                <li id="test4">Content 4</li>
            </ul>
        </body>
    </html>

如果您的数据文件不包含数百条大行和长行，这只是一种很好的方法。在javascript数组中读取那么多数据会占用大量内存。

如果您有大量数据，则应使用服务器端逻辑从文件中提取行：

            <script type="text/javascript">
                $(document).ready(function() {                                 
                    $('#root li').click(function() {
                        var li = $(this);
                        var index = $('#root li').index(li);

                        // use this ajax request to let PHP fetch the content of that line
                        $.get('fetchline.php', 'index=' + index, function(line) {
                            li.append(line);                    
                        });
                    });                    
                });
            </script>

fetchline.php看起来像这样（简化）：

<?php 
// get the index provided as GET var
$index = intval($_GET['index']);
// read all lines from the data file in an array, not super optimisied, 
// but should do for not too large files
$lines = file('my_data.txt');
// print the line with index = $index
print $lines[$index];

使用jquery将特定行从文件追加到list元素

1 个答案: