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

【问题标题】：remove previous JSON Data in client side and reload new Data on button click在客户端删除以前的 JSON 数据并在按钮单击时重新加载新数据
【发布时间】：2013-11-22 23:32:19
【问题描述】：

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

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

我的问题是，当我单击搜索按钮时，它正在生成一个带有旧 JSON 数据的新 JSON 数据，例如在页面加载中我真的不希望有 Apple，但是当我从 DropDownlist 中选择 Orange 并点击搜索时按钮将同时显示 Apple 和 Orange，它应该只显示 Orange，因为我只搜索 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;"/>

【问题讨论】：

“更新”是什么样的控件？为什么不先把它清理干净再装更多的东西？
嗨@SteveWellens its updating the #update ID with more stuff.. thats 我的问题是如何在填写更多内容之前清除#update ID？
@SteveWellens update id 只是一个简单的 div 我已经更新了我的问题

标签： jquery asp.net ajax json

【解决方案1】：

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

【讨论】：

嗨@charlietfl 我试过这个和这个 $('#update').html('');但它不工作
更新问题中的代码，显示您放置它的位置。如果放在正确的地方就必须工作
我把它放在像这样 $("#update").empty() $.ajax({}) 之前的 Ajax 请求之前，并且还在像这样成功的字符串新 html 之前尝试过：function(data) { $("#update").empty();
没有意义，它不起作用...创建一个复制问题的演示
试试这个：alert($("#update").length) 以确保您实际上得到了更新元素。它应该显示一个 1。

【解决方案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>

【讨论】：