Question

我正在尝试将JSON数据从下拉菜单加载到div区域，该区域将使用新结果刷新，我已经管理以获取数据并在div区域中显示它而不使用下拉菜单，但是找不到使用下拉菜单调用所需数据的方法。

下面的代码是从我加载网页时出现的json文件中调出部分json数据，但我需要的是当用户点击下拉菜单并点击时任何链接，都会显示相关的json数据

$(function loadpc()
{
    $(document).ready(function () { // load json file using jquery ajax
        $.getJSON('PCproducts.json', function (data) {
            var output = '<div id="row">';
            var count = 1;
            $.each(data.pc, function (key, val) {
                output += '<div id="holding-area">';
                output += '<div id="img-area">' +
                   '<img id="img" src="'+val.imgpath+'" alt="'+ val.title +'" /></div>';
                output += '<div id="info">';
                output += '<h2>' + val.title + '</h2>';
                output += '<p>' + val.category + '</p>';
                output += '<p>' + val.develop + '</p>';
                output += '<p>' + val.released + '</p>';
                output += '<p>' + val.price + '</p>';
                output += '<p>' + val.quantity + '</p>';
                output += '<p><input type="submit" value="Add to cart" class="btn" /></p>'
                output += '</div>';
                output += '</div>';
                if(count%2 == 0){
                  output += '</div><div id="row">'
                  }
                  count++;
            });
            output += '</div>';
            $('#content-2-1').html(output);     // replace all existing content
        });
    });
});

任何人都可以指导我正确的方向，因为我已经尝试了很长时间没有成功

Answer 1

使用jquery模板的方式很简单：）

您可以在jquery template documentation

找到一些信息

jquery模板是一个简单的类型，我从我的一个项目中获取它：

 <script type="text/x-jquery-tmpl" id="tplmsg">
    <div class="row">
    <div class="col-xs-3 col-md-1">
        <img src="${src}" class="img-thumbnail" alt="${title}" />
    </div>
    <div class="col-xs-9 col-md-11">
        <div class="col-xs-12 col-md-12">
            <p class="title"><a href="/<%=Session("lang")%>/${cat}/${sct}/${rws(title)}/${prov}/${id}">${getSubstring(title,0,100)}</a></p>
        </div>
        <div class="col-xs-12 col-md-12 btf" >
            <p class="adsdts"><strong>Data: </strong>${parseJsonDate(DateAdd)} &nbsp;           
               <strong>Prezzo:</strong>${price} &nbsp;
                <strong>Provincia:</strong><a href="/<%=Session("lang")%>/<%=Resources.COREMSG.ANNUNCIPROV%>/${rws(pvname)}">${pvname}</a> 
               <%--<strong>Provincia:</strong><a href="/<%=Session("lang")%>/${cat}/${sct}/${pvname}">${pvname}</a>--%>
            </p>
        </div>
    </div>
</div>
<hr />
</script>

在上面的内容中你可能会看到一些与vbnet相关的东西，逻辑是一样的。然后你可以用这样简单的js函数填充它：

function getAds(task,token) {

var qry='task='+task+'&token=' +token;
$.ajax(
{
type: "POST", url: url, data: qry
,
 success: function (msg) {

    if (msg.hasOwnProperty('error')) {
        $("#").html(msg.error);
        return;
    }
    else if (msg.hasOwnProperty('empty')) {
        $("#result").html(msg.empty);
        return;
    }
    else {
        //reular version
        $("#"+msg.tmpl).tmpl(msg.data, null).appendTo("#"+msg.result);
    }
},
error: function (msg) {
    $("#result").html("errore durante l'elaborazione");
}
 });


}

这一切都很简单快捷。

使用下拉菜单加载JSON数据，并使用网站中的新结果刷新div区域

1 个答案: