使用jquery ajax时将页面附加到我的url

问题描述：

我创建了3个链接，都链接到网站根目录中的hrefs，然后创建了一个点击事件，当使用ajax加载hrefs适当的页面时。我的问题是，在这样做我的网址保持不变。我如何将href值附加到url？使用jquery ajax时将页面附加到我的url

样品我的代码：

<ul id="nav"> 
    <li><a href="page1.html">Link 1</a></li> 
    <li><a href="page2.html">Link 2</a></li> 
</ul> 

$(document).ready(function() {  

$('#nav li a').click(function(e) { 
    var href = $(this).attr('href'); 

    $.ajax({ 
     url : href, 
     method : 'get', 
     success : function(data) { 
      $('#content').html(data); 
      console.log('complete'); 
     } 
    }); 

    e.preventDefault(); 
});

所有劝欢迎:) 感谢

也许[本SO问题]（http://stackoverflow.com/questions/136458/how-do-i-with-javascript-change-the-url-in-the-浏览器无需加载新的）是你在找什么？ – Jeroen

答

jQuery的地址插件是非常容易使用：

http://www.asual.com/jquery/address/

和历史插件对于你想要的东西以及在ajax站点中处理后退按钮等的使用也很有用。

http://tkyk.github.com/jquery-history-plugin/

答

我假设你的意思是你想将其追加到您的当前页面的URL

在这种情况下，你应该能够做到这一点：

$.ajax({ 
     url : window.location.href + "/" + href, 
     method : 'get', 
     success : function(data) { 
      $('#content').html(data); 
      console.log('complete'); 
     } 
    });

编辑：

一旦你得到了ajax页面，你就可以访问它内部的元素。例如，如果您的页面上有div，您可以在您的成功功能中选择它。试试这个：

success : function(data) { 
       var $selectedElement = $(data).find("#SELECTYOURELEMENT"); 
       $('#content').html($selectedElement); 
       // or you can append the element to your content if you would prefer that 
       console.log('complete'); 
      }

感谢这一点，目前ajax调用获取ref页面的所有数据，我怎样才能限制它只获取一组特定的元素？ – styler

请参阅编辑，是你在找什么？ – Evan

答

$(function() { 
    $('#nav li a').click(function(e) { 
     e.preventDefault(); 
     $('#content').load(this.href); 
    }); 
});

答

我创建了3个链接所有链接到网页在我的网站的根目录中的HREFs，香港专业教育学院则创造了一个点击事件发射时使用AJAX来加载的HREFs合适的页面但网页无法加载。我的HTML代码示例

<div class="nav-tabs-custom"> 
      <ul class="nav nav-tabs" id="nav"> 
       <li class="active"> 
       <a href="tab1.html" data-toggle="tab" >Apply Leaves</a> 
       </li> 
       <li> 
       <a href="tab2.html" data-toggle="tab" >My Leaves</a> 
       </li> 
       <li> 
       <a href="tab3.html" data-toggle="tab" >Leave Record</a> 
      </li> 
      </ul> 
      <div class="tab-content" id="ajax-content"> 

      </div>

和我的jQuery代码

$（文件）。就绪（函数（）{ $（ “＃导航李一”）。点击（函数（）{

$("#ajax-content").empty().append("<div id='loading'><img src='../static/js/ajax-loader.gif' alt='Loading' /></div>"); 
    $("#nav li a").removeClass('current'); 
    $(this).addClass('current'); 

    $.ajax({ url: this.href, success: function(html) { 
     ("#ajax-content").empty().append(html); 
      alert(this.href); 
     } 
}); 
return false; 
});

}）;

使用jquery ajax时将页面附加到我的url

相关推荐