Question

问题：

输入两个表单值（最小/最大价格）时不会更新显示的查询结果。首次输入时，结果会正确显示，但是当其后使用新参数更改表单值时，html代码不会更新以反映这些参数。

HTML code：

<input type="text" size="5" placeholder="Min. price" id="price_min">
<input type="text" size="5" placeholder="Max. price" id="price_max">
<input type="button" onclick="getHotelInfo()" value="Get" />
<div id="hotel_info"></div>

JavaScript代码：

function getHotelInfo() {
    $.get('hotelservice.php?priceMin=' + $('input#price_min').val() + '&priceMax=' + $('input#price_max').val(), function(data) {
        var hotelInfo = JSON.parse(data);
        content = '<table style="font-size:10px;width:100%;"><tr><th>Name</th><th>Stars</th><th>Price</th></tr>';
        for (var hotel=0; hotel<5;hotel++) 
        {
            content += '<tr><td><a href="' + hotelInfo[hotel].externalLink + '">' + hotelInfo[hotel].name +'</a></td><td><center>' + hotelInfo[hotel].stars + '</center></td><td><center>' + hotelInfo[hotel].price + '</center></td></tr>';
        }
        content += '</table>';
        $('#hotel_info').replaceWith(content);
    });
}

PHP代码：

$priceMin = $_GET['priceMin'];
$priceMax = $_GET['priceMax'];

$xml_source = file_get_contents('http://www.kayak.com/h/rss/hotelrss/SE/vaxjo?mc=EUR');
$xml = simplexml_load_string($xml_source);
$result = array();
foreach ($xml->channel->item as $item) {
    $kyk = $item->children('http://www.kayak.com/h/rss/hotelextension');
    $price = (int)$kyk->price;
    if ($price < $priceMax && $price > $priceMin) {
        $entry = new stdClass();
        $entry->name = (string)$item->title;
        $entry->externalLink = (string)$item->link;
        $entry->price = $price;
        $entry->stars = (int)$kyk->stars;
        $result[] = $entry;
    }
}
echo json_encode($result);

期望的输出： 当更改表单值并调用getHotelInfo（）时，应反映新结果。

Answer 1

我测试了你的脚本，问题是（从我的简短测试中）PHP脚本有时会返回少于5个结果，然后你仍然尝试获取5个结果（在for循环中）。这会导致脚本访问不存在的对象的属性，这会导致错误并且脚本失败。因此没有任何更新。

无论如何，我去了一个脑袋并为您更新了脚本，因此返回的数据最多为5或PHP脚本返回数据的长度。新的javascript函数如下所示：

function getHotelInfo() {
    $.get('test.php?priceMin=' + $('input#price_min').val() + '&priceMax=' + $('input#price_max').val(), function(data) {
        var hotelInfo = JSON.parse(data);
        var limit = hotelInfo.length > 5 ? 5 : hotelInfo.length;

        content = '<table style="font-size:10px;width:100%;"><tr><th>Name</th><th>Stars</th><th>Price</th></tr>';
        for (var hotel=0; hotel< limit;hotel++) 
        {
            content += '<tr><td><a href="' + hotelInfo[hotel].externalLink + '">' + hotelInfo[hotel].name +'</a></td><td><center>' + hotelInfo[hotel].stars + '</center></td><td><center>' + hotelInfo[hotel].price + '</center></td></tr>';
        }
        content += '</table>';
        $('#hotel_info').html(content);
    });
}

希望这能解决你的问题！

JavaScript不使用新的表单值更新HTML代码

1 个答案: