Question

在页面加载中我得到的json数据没问题，但是当我点击搜索按钮时，它会根据搜索条件重新加载新的JSON数据，并从客户端删除以前的JSON数据。

在搜索条件中，有一些带有搜索按钮的下拉列表和文本框，搜索条件中的所有控件都是服务器控件（Asp.net）

我的问题是，当我点击搜索按钮时，它正在生成一个带有旧JSON数据的新JSON数据，我真的不想要例如在页面加载中有Apple，但是当我从DropDownlist中选择Orange并点击搜索时按钮它会同时显示Apple和Orange，它应该只显示橙色，因为我只搜索橙色而不是苹果和橙色..

这是我显示json数据的代码

<script type="text/javascript">

        function StockList() {
            $.ajax({
                type: "POST",
                url: "stocklist.aspx/Select_Search",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(data) {
                    var j = 1;
                    var count = 9;

                    for (var i = 0; i < data.d.length; i++) {


                        var output = '<ul class="selection page-' + (i == count || (i && !(i % 9)) ? j++ : j) + '">';
                        output += '<li >';
                        output += '<table><tr>';
                        output += '<td><img src="http://localhost:37245/NewPeaceAuto - Steer_Well/WebStock_Images/' + data.d[i].Image1 + '" alt=""/></td>';
                        output += '<td>CHASSIS NO:</td><td>' + data.d[i].CHASSIS_NO + '</td>';
                        output += '<td>MODEL:</td><td>' + data.d[i].MODEL + '</td>';
                        output += '<td>COLOR:</td><td>' + data.d[i].color + '</td>';
                        output += '<td>TRANS:</td><td>' + data.d[i].TRANSMISSION + '</td>';
                        output += '<td>DOOR:</td><td>' + data.d[i].DOOR + '</td>';
                        output += '<td>MAKE:</td><td>' + data.d[i].MAKE + '</td>';
                        output += '</tr></table></li></ul>';
                        $("#update").append(output);
                        count = count + 9;
                    }


                }
            });
        }
</script>

在页面加载

<body onload="StockList();">

页面加载或按钮单击JSON数据附加在#update id div

中

<div id="update"></div>

通过从下拉列表中选择一个值

，从搜索条件点击按钮点击

 <asp:DropDownList ID="ddlMake" runat="server" DataSourceID="odsMake" 
        DataTextField="make" DataValueField="makeID">
 </asp:DropDownList>

<asp:Button ID="Button2" runat="server" Text="Button" OnClientClick="StockList(); return false;"/>

Answer 1

在开始编译新的html之前，只需将$("#update").empty()放入AJAX请求之前或成功回调中

Answer 2

进行以下更改。我认为它可能会对您有所帮助：

<script type="text/javascript">

        function StockList() {
           var output; //declare the variable
           $("#update").append(output); // append a null to div
            $.ajax({
                type: "POST",
                url: "stocklist.aspx/Select_Search",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(data) {
                    var j = 1;
                    var count = 9;

                    for (var i = 0; i < data.d.length; i++) {


                        output = '<ul class="selection page-' + (i == count || (i && !(i % 9)) ? j++ : j) + '">';
                        output += '<li >';
                        output += '<table><tr>';
                        output += '<td><img src="http://localhost:37245/NewPeaceAuto - Steer_Well/WebStock_Images/' + data.d[i].Image1 + '" alt=""/></td>';
                        output += '<td>CHASSIS NO:</td><td>' + data.d[i].CHASSIS_NO + '</td>';
                        output += '<td>MODEL:</td><td>' + data.d[i].MODEL + '</td>';
                        output += '<td>COLOR:</td><td>' + data.d[i].color + '</td>';
                        output += '<td>TRANS:</td><td>' + data.d[i].TRANSMISSION + '</td>';
                        output += '<td>DOOR:</td><td>' + data.d[i].DOOR + '</td>';
                        output += '<td>MAKE:</td><td>' + data.d[i].MAKE + '</td>';
                        output += '</tr></table></li></ul>';
                        $("#update").append(output);
                        count = count + 9;
                    }
                     output=""; //make the output to null

                }
            });
        }
</script>

在客户端删除以前的JSON数据，并在按钮单击时重新加载新数据

2 个答案: