0

我有一个<ul id="keuze_lijst">, 一个带有 id 的输入字段#sykje和一个带有 class 的按钮.search。

现在，当我按下按钮时，我想清除 UL 并用数据重新填充它，为此我目前得到了这个 .js 文件。

$(document).ready(function() {
    $(".search").click(function(){
        var searchValue = $("#sykje").val();
        $("#keuze_lijst").empty();

        $.ajax({
            url: 'http://www.autive.nl/frysk/simulator/sim.php?action=getSongs&search='+searchValue,
            data: "",
            dataType: 'json',
            success: function(rows) {
                for(var i in rows){
                    var row = rows[i];
                    var id = row[1];
                    var titel = row[2];
                    var artiest = row[9];

                    $("#keuze_lijst").append("<li class='mag_droppen'>"+
                                    "<div class='song_left'>"+
                                    "<div class='titel'>"+titel+"</div>"+
                                    "<div class='artiest'>"+artiest+"</div>"+
                                    "</div><!-- .song_left -->"+
                                    "</li>");
                }

            }
        });
    });
});

当我删除 ajax 命令并放置类似的东西时，$("#keuze_lijst").html("hello");它可以正常工作。但是 ajax 命令不起作用。虽然var searchValue他的工作。（ajax 使用正确的 url）。当我输入该网址时，页面会回显一个带有多行的精细 json。

但是在我的页面中，ajax 脚本没有添加<li>.

我究竟做错了什么？

编辑：添加了一个 jsfiddle -> http://jsfiddle.net/TVvKb/1/

4

4 回答 4

1

.html()完全取代了 HTML。所以最后，你的"#keuze_list遗嘱包含</li>.

在将 html 构建为字符串 var 或其他内容后，只需执行一个 html() 命令即可。

于 2012-11-01T13:55:00.383 回答
0

一眼看去，我可以说问题可能出在您对该html()功能的使用上。这实际上替换了整个 html 内容。

您可能想尝试使用append()or prepend()。

于 2012-11-01T13:55:25.283 回答
0

可能的问题：

您遇到了同源问题。默认情况下，您只能向您自己的域发出 Ajax 请求。如果您需要进行跨域调用，请使用JSONP或CORS。

只使用html()一次，并交出您的完整字符串，否则您将一直覆盖您以前的 html。

success由于错误（例如无效的 JSON），您没有登陆处理程序。

于 2012-11-01T13:55:43.480 回答
0

不确定，但我认为如果您在.append()jQuery 和其他 jQuery 方法中插入一个字符串，它首先会解析为（有效的）HTML。这意味着未封闭的标签是封闭的，使您的 HTML 无效。

$('<div />'); // parses to <div></div>

所以，我假设你的 DOM 最终是这样的：

$('ul').append('<li>').append('foo').append('</li>'); // <ul><li></li>foo</li></ul>

请先格式化您的字符串。您不希望 jQuery 解析每个输入。

var str = '<li>';
str += 'foo';
str += '</li>';

$('ul').html(str);

对于跨域 AJAX 请求（无 JSONP）：

代理.php

header('Content-Type: application/json');

if(empty($_GET['search'])) exit;

$url = 'http://www.autive.nl/frysk/simulator/sim.php?action=getSongs&search=' . $_GET['search'];

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_exec($ch);
curl_close($ch);

Javascript

$.getJSON({
    url: 'proxy.php&search='+searchValue,
    success: callback
});
于 2012-11-01T14:14:31.730 回答