Question

<div data-role="page">
<div data-role="header">
    <h1>jQuery Mobile Example</h1>
</div>
<div data-role="content" class="ui-content">
    <p>First</p>
</div>
<div data-role="footer">
    <div data-role="navbar" >
        <ul>
        <li><a href="#" class="ui-btn-active">First</a></li>
        <li><a href="/test/second.jsp">Second</a></li>
        </ul>
    </div>
</div>
</div>

second.jsp

<p>Second<p/>

我想只更改从服务器端收到的内容div，同时单击第二个按钮。

不得更改页眉和页脚。还支持历史记录，幻灯片动画。

怎么样？

Answer 1

可以使用jQuery AJAX便捷方法load()

$('.ui-content').load('/path/to/server/second.jsp');

它将进行ajax调用并用来自服务器的响应替换选择器中元素的html

load() API Docs

Answer 2

使用ajax调用，在success之后使用$(".ui-content").html("New content");

所以

<li><a id="secondAjax" href="javascript:void(0);">Second</a></li>

$("#secondAjax").click(function(){
    $.ajax({
      url:'YOUR LOCALHOST PATH/test/second.jsp',
      success:function(data){
        $(".ui-content").html(data);
      }
    });
});

如何只更改jquery mobile中的内容？

2 个答案: