php - 使用 JS 和 PHP 重新加载自动完成部分页面？

Question

好吧，卡在这里...我有一个 Twitter 提前输入自动完成框。

        <div id="sites">
            <span></h4>Site Review</h4><input class="typeahead form-control" type="text" placeholder="Spot Check for..."></span>
        </div>

在选择自动完成时，我想刷新一个 div，其中包含存储在 mysql 服务器中的每个“站点”所独有的列表元素，而不是重新加载页面或 iframe。这些将由 get_site_attributes.php 获取

$('.typeahead')
    .typeahead(/* pass in your datasets and initialize the typeahead */)
    .on('typeahead:selected', onAutocompleted)
    .on('typeahead:autocompleted', onSelected);


function onAutocompleted($e, datum) {
...
}

function onSelected($e, datum) {
...
}

现在如何在不使用 iframe 的情况下使用 get_site_attributes.php 的内容重新加载该 div？

-提前致谢

Answer 1

正如评论中所说，你必须使用ajax。

在任何需要刷新 DOM 内容的地方调用 ajaxCall 方法

假设你有这个:

<h1 class='site_title'></h1>

然后在你的js中:

var ajaxCall = function(){
    $.ajax({
    url : 'get_site_attributes.php', #or relative path
    type : 'GET',
    dataType:'', #whatever get_site_attributes.php is returning: html/json/...
    success : function(data) {              
        updateDatas(data);
    },
    error : function(request, error) {
        console.log(request, error);
    }
 });
}

var updateDatas(data) = function(){
    # replace whatever you want in the DOM with your datas
    # for example: 
    # $('.site_title').empty();
    # $('.site_title').append(data.site_title);
}