Question

我有一个<ul id="keuze_lijst">，一个标识为#sykje的输入字段和一个类.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）。当我输入该URL时，页面会回显一个有多行的精细json。

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

我做错了什么？

编辑添加了一个jsfiddle - ＆gt; http://jsfiddle.net/TVvKb/1/

Answer 1

.html()完全取代了HTML。最后，您的"#keuze_list将包含</li>。

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

Answer 2

从快速浏览一下，我可以说问题可能出在您使用html()功能上。这实际上取代了整个html内容。

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

Answer 3

可能出现的问题：

您正在遇到Same Origin Problem。默认情况下，您只能将Ajax-Requests发送到您自己的域。如果您需要进行跨域调用，请使用JSONP或CORS。

仅使用html()一次，然后移交整个字符串，否则您将一直覆盖以前的HTML。

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

Answer 4

不确定，但我认为如果在.append()和其他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）：

<强> proxy.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
});

我的ajax请求无效

4 个答案: