Question

此界面正在移动应用上发生。我正在尝试按下主页面上的按钮（#home），这会将我的屏幕更改为子页面（#benefits），其显示如下：

福利1

日期：3月27日

第0天

金额：$ 100.00

福利2 .... 等等。

我正在尝试使用ajax来执行此操作，并且从服务器URL获取信息。

例如，如果我访问www.awebsite.com/getinfo /

我收到以下信息：

[{"amount":"43.00","reference":"benefit 1","due":{"date":"27 Mar","days":0}},
{"amount":"47.00","reference":"benefit 2","due":{"date":"29 Mar","days":1}},
{"amount":"33.00","reference":"benefit 3","due":{"date":"1 Apr","days":5}}]

我想从服务器获取这些信息，并按照开头的格式打印出来。

我正在尝试使用JSON进行格式化，并尝试通过此处的示例和API进行尝试但无法执行此操作。我不确定我的脚本是否正确，如果我的格式正确，但脚本不起作用。如果它不是太麻烦，有人可以告诉我，我能做到这一点。

我的html主页：

<!--Pressing the Benefits page starts the ajax process plus move me to the subpage benefits-->
<div data-role="page" id="home" data-theme="e">
            <header data-role="header">
                    <h1>Budget Planner</h1>
            </header>
            <article data-role="content">
                <ul data-role="listview" >
                    <li id="benefit_button">
                        <a href="#benefits" data-transition="slidefade">
                            <h1>Benefits</h1>
                            <img src="img/orange-icon.png" alt="benefits">
                        </a>
                    </li>
                </ul>
            </article>
</div>

我的html子页面：

<div data-role="page" id="benefits" data-theme="e">
            <header data-role="header">
            <h1>Benefits</h1>   
        </header>

        <article data-role="content">
            <div data-role="collapsible-set">
                <div data-role="collapsible" id="benefitsList">
                    <!--Hard coded in the information for demo-->
                    <h1>Benefit 1</h1>
                    <p>Date: 27 Mar</p>
                    <p>Days 0</p>
                    <p>Amount: $100.00</p>
                </div>
            </div>
        </article>
</div>

我的剧本:(已编辑）

$("benefit_button").click(function(){
  $.getJSON("http://www.awebsite.com/getinfo/",function(data){
    $.each(data,function(elem){
//Create the h1 and the other elements appending them to    
//benefitsList
$("<h1/>",{
    text:data[elem].reference
}).appendTo("#benefitsList")

$("<p/>",{
    text:"Date: "+ data[elem].due.date
}).appendTo("#benefitsList")

$("<p/>",{
    text:"Days: "+ data[elem].due.days
}).appendTo("#benefitsList")

$("<p/>",{
    text:"Days: "+ data[elem].due.days
}).appendTo("#benefitsList")

$("<p/>",{
    text:"Amount: "+ data[elem].amount
}).appendTo("#benefitsList")

    })
  });
});

Answer 1

使用您的数据，您可以尝试使用这样的内容来创建元素，只需使用appendTo()

即可

您可以动态创建元素，请参阅此Docs

var data =[{"amount":"43.00","reference":"benefit 1","due":{"date":"27 Mar","days":0}},
{"amount":"47.00","reference":"benefit 2","due":{"date":"29 Mar","days":1}},
{"amount":"33.00","reference":"benefit 3","due":{"date":"1 Apr","days":5}}];


//Loop for each element on the data
$.each(data,function(elem){
    //Create the h1 and the other elements appending them to    
    //benefitsList
    $("<h1/>",{
        text:data[elem].reference
    }).appendTo("#benefitsList")

    $("<p/>",{
        text:"Date: "+ data[elem].due.date
    }).appendTo("#benefitsList")

    $("<p/>",{
        text:"Days: "+ data[elem].due.days
    }).appendTo("#benefitsList")

    $("<p/>",{
        text:"Days: "+ data[elem].due.days
    }).appendTo("#benefitsList")

    $("<p/>",{
        text:"Amount: "+ data[elem].amount
    }).appendTo("#benefitsList")

})

这是Fiddle

JSON响应的小提琴模拟Here

从服务器获取信息并以格式打印出来

1 个答案: