使用不同的 API 参数更新 DIV 内容

Question

我正在尝试在 DOM 加载后更新 div 的内容。

内容是从 API 加载的，该 API 根据传递的参数值加载不同的内容。

内容加载良好开始。但是我可以选择让用户只加载“销售”或“租赁”属性，这样我就有一个 onClick 函数来更新 API 的参数。

这是我的代码

var url = "http://api.zoopla.co.uk/api/v1/property_listings.js";
var key = "APIKEY";
var branch = "7103";
var ajaxURL = url + "?branch_id=" + branch + "&api_key=" + key;

$('#rentals a').click(function (evt) {
    var link = $(this).attr('href');
    ajaxURL += link;
    $("#main").load('#main');
    evt.preventDefault();

});

$.ajax({
    type: 'GET',
    dataType: 'jsonp',
    jsonp: 'jsonp',
    url: ajaxURL,
    success: function (data) {
        $.each(data.listing, function (i, property) {
            $("#main").append('<h3>' + property.displayable_address + '</h3><p>' + property.description + '<br /> <img src="' + property.image_url + '" /> </p>')
        });
    },
    error: function () {
        alert("Sorry, I can't get the feed");
    }
}); // end GET

这里的代码我无法工作

$('#rentals a').click(function (evt) {
    var link = $(this).attr('href');
    ajaxURL += link;
    $("#main").load('#main');
    evt.preventDefault();
});

Answer 1

.load() 函数期望将 url 传递给它，但您传递的是相同的选择器 (#main)。它可能应该更像这样：

$('#main').load(ajaxURL);