Question

我有3个.html文件。 1：products1.html 2：products2.html 3：allproducts.html

在products1.html和products2.html上，我有div元素显示我的产品，例如product1.html：

<div data-role="content" id="product1items">

    <ul data-role="listview">
        <li>
        <a href="item1.html" data-ajax="false" data-transition="slide">
            <img src="images/item1.jpg">
            <h2>Item1</h2>

        </a>
        </li>
</ul>
</div>

在allproducts.html上我想获取/获取products1.html和products2.html中的元素，因此该页面将显示我的所有产品。我将如何在JQuery / JQuery Mobile中执行此操作？

提前致谢！

我无法在自己的帖子上发布回复，因为我是新用户，因此我更新了此帖子。

我现在有以下内容（到目前为止仅创建了products1.html＆amp; allproducts.html）。我试图将products1.html的内容加载到allproducts.html中，你能告诉我我做错了吗？

products1.html：

<html>
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>  
</head>

<body>

<div data-role="page" id="productpage">

    <div data-role="content" id="product1">
        <ul data-role="listview">
        <li>
        <a href="item1.html" data-ajax="false" data-transition="slide">
            <img src="images/item1.jpg">
            </a>
        </li>
        </ul>
     </div>
 </div>
</body>
</html>

allproducts.html：

<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>


</head>

<body>

    <div data-role="page" id="allproductspage">

    <div data-role="content" id="allproducts">
        </div>

<script>
$.get( "products1.html", function( data ) {
  $( ".allproducts" ).append( data );
  alert( "Load was performed." );
});
</script> 

 </div>

</body>
</html>

Answer 1

您可以向html文件发送AJAX请求，并将答案内容附加到您的allproducts.html。

    $.get( "products1.html", function( data ) {
      $( "#allproducts" ).html($( "#allproducts" ).html(  )+data );
      alert( "Load was performed." );
    });
  $.get( "products2.html", function( data ) {
      $( "#allproducts" ).html($( "#allproducts" ).html(  )+data );
      alert( "Load was performed." );
    });

如果您需要任何技术细节，我会编辑此答案

在JQuery / JQuery Mobile中获取div元素的内容

1 个答案: