Ajax调用是否可以通过文本链接触发？

Question

我使用一个下拉列表完成了一个小教程示例，该列表使用Ajax加载一些PHP页面。

我的问题是，我可以使用文本链接，而不是下拉列表？如果是这样，代码如何改变？

$(document).ready(function() { 
    $('#category').change(function() { 

    var val = $(this).val(); 
    $('#firstresult').empty().addClass('loading').load(val + '.php', function(){ 
     $('#firstresult').removeClass('loading') 
    }); 

    }); 
}); 

Answer 1

$(document).ready(function() { 
    $('#yourLink').click(function(e) { 
    e.preventDefault();//so the link doesn't try to go somewhere 
    var val = $(this).text(); //get value from the TEXT of your link 

    $('#firstresult').empty().text('loading').addClass('loading'); //put 'loading' in your firstresult div and change the class to loading 
    $('#firstresult').load(val + '.php', function(){ 
     //load firstresult with what your php page returns 
     $('#firstresult').removeClass('loading') 
    }); 

    }); 
}); 

Answer 2

如果#category是您的文本链接的ID。

我输入了返回false以防止点击事件冒泡并重新加载您的页面。

我没有，虽然测试...

$(document).ready(function() { 
     $('#category').click(function() { 

     var val = $(this).attr('href'); 
     $('#firstresult').empty().addClass('loading').load(val + '.php', function(){ 
      $('#firstresult').removeClass('loading') 
     }); 

     return false; 

     }); 
    }); 

编辑

<a id="category" href="my_val" title="">my link</a> 

您可以从href属性传递值

Answer 3

照此但具有点击功能

$(document).ready(function() { 
    $('#my_link').click(function(e) { 
     e.preventDefault(); 
     var val=$(this).text(); 
     $('#firstresult').empty().addClass('loading').load(val + '.php', function(){ 
     $('#firstresult').removeClass('loading') 
     }); 

    }); 
}); 

Answer 4

您需要给文本链接一个id，但可能会将href关闭。

<一个ID = 'myTextLink'>链接</A>

$(document).ready(function() { 
    $('#myTextLink').click(function() { 

    var val = $(this).val(); 
    $('#firstresult').empty().addClass('loading').load(val + '.php', function(){ 
     $('#firstresult').removeClass('loading') 
    }); 

    }); 
});