Question

这是我原来的功能。它工作得很好，我只是想压缩一下：

 <script type='text/javascript'>
function searchmusic(){
var ajaxRequest;  

try{
    ajaxRequest = new XMLHttpRequest();
} catch (e){
    try{
        ajaxRequest = new ActiveXObject('Msxml2.XMLHTTP');
    } catch (e) {
        try{
            ajaxRequest = new ActiveXObject('Microsoft.XMLHTTP');
        } catch (e){
            alert('Your browser broke!');
            return false;
        }
    }
}
ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
        var ajaxDisplay = document.getElementById('searchresults');
        ajaxDisplay.innerHTML = ajaxRequest.responseText;

    }
}
var search = document.getElementById('search').value;
var params = 'search=' + search;
ajaxRequest.open('POST', 'getsearch.php', true);  
ajaxRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajaxRequest.send(params);

}
</script>

我正在尝试压缩此函数，所以我尝试使用jQuery复制它：

 <script>
 function searchmusic(){
 var search = document.getElementById('search').value;
 $.ajax({
type: 'POST',
url: getsearch.php,
async: true,
data: 'search=' + search,
success: function(data) {
$('#searchresults').load(data);
 }
 });
 }
</script>

但是，我无法使此功能正常工作。有人可以告诉我我在哪里犯了错误，以及为什么这个功能不起作用，或者可能是这个新功能不能像我原来那样起作用。我不知道，但是非常感谢任何帮助，谢谢！

Answer 1

变化：

url: getsearch.php, // The property php of the getsearch variable

要：

url: 'getsearch.php', // A string with the URL.

并改变：

$('#searchresults').load(data);

要：

$('#searchresults').html(data);

Answer 2

url: getsearch.php,

应该是

url: 'getsearch.php',

和

success: function(data) {
    $('#searchresults').load(data);
}

应该是

success: function(data) {
    $('#searchresults').html(data);
}

而且var search = document.getElementById('search').value;也可以，但因为您使用的是jQuery，所以您可以使用var search = $('#search').val()代替默认async is true，这样您就可以省略它$.ajax $.post 1}}可以是type: 'POST'，因此您也可以删除{{1}}。

Answer 3

Waaaay更紧凑：

function searchmusic(){
 $("#searchresult").load("getsearch.php", {search: $("#search").val()});
}

这就是你所有的功能需求：）

只要AJAX结果进入元素内，您就可以使用.load()。作为对象传递的参数确保我们执行POST而不是GET调用。所以你的功能可以减少很多。

将Ajax / jQuery Post函数转换为jQuery

3 个答案: