Question

我有一个html代码，它适用于ajax和jQuery。他的工作意义是通过html-form显示用户的推文，user_id和tweets数量发送到ajax请求。所以，当我发送这些数据时，我会收到推文。但是当我每次发送数据时，旧的推文都不会删除。例如，如果我没有看到推文，我想看到三条推文 - 我会收到三条推文，但是当我下次想看到两条推文时，我会看到五条推文（3 + 2）。所以我想只看到新的推文。怎么解决？我的代码：

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>(This is a title) Page example using HTML5</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <style type="text/css">
            header {
                border-style: dashed;
                border-width: 0 0 1px 0;
                margin-bottom: 20px;
                padding: 10px
            }
            header h2 {
                text-align: center;
            }
            #tweets article {
                margin-bottom: 20px;
            }
            #tweets article h1 img {
                float: left;
            }
            #tweets article h1 span {
                font-size: 14px;
                color: blue;
            }
            #tweets article details span {
                font-size: 12px;
                color: gray;
            }
        </style>
    </head>

    <body>
        <header>
             <h2>Page header</h2>

        </header>
        <!-- Control unit -->
        <nav></nav>
        <!-- Primary unit -->
        <section id="content">
            <!-- Control units -->
            <section id="controls"></section>
            <form id="tweetshow" method="post" action="" >
               <p>
               Enter user_id: <input type="text" name="user_id" />
               </p>
               <p>
               Enter user last tweets amount: <input type="text" name="last_tweets_amount" />
               </p>
               <p>
               From date: <input type="text" name="from_date" />
               </p>
               <p>
               To date: <input type="text" name="to_date" />
              </p>
               <p>
               <input type="button" value="Submit" onClick="ShowTweets()"/>
               </p>
            </form>
            <!-- tweet units -->
            <section id="tweets"></section>
        </section>
        <footer>
            <p>Page bottom</p>
        </footer>

        <script type="text/javascript">

            //
            // Example AJAX-request executing to Twitter API
            //

            function ShowTweets()
            {
                var params = {
                    include_entities: true,
                    include_rts: true,
                    screen_name: document.forms['tweetshow'].user_id.value,
                    count: document.forms['tweetshow'].last_tweets_amount.value
                };

                $(document).ready(function() {                  

                    //Proxy entry point
                    var apiEndPoint = "http://localhost:8888/1.1/";

                    // Request parameters are here 
                    // https://dev.twitter.com/docs/api/1/get/statuses/user_timeline

                    // To execute async-request using jQuery
                    $.ajax({
                        // Full URL to source    
                        url: apiEndPoint + "statuses/user_timeline.json",

                        // HTTP-request type
                        type: "POST",

                        // Returned data type
                        dataType: "jsonp",

                        // Parameters
                        data: params,

                        // method if response has been successful
                        success: function (response) {
                            // look all response array
                            $.each(response, function (i, item) {
                                //console.dir(item);

                                // to wrap data into html and insert into #tweets section
                                var $header = $("<h1>")
                                    .append($("<img>", { src: item.user.profile_image_url}))
                                    .append($("<span>").html(item.user.name));

                                var $text = $("<p>").html(item.text);

                                var $details = $("<details>").append(
                                    $("<span>").html(item.created_at)
                                );

                                $("<article>", { id: item.id })
                                    .append($header, $text, $details)
                                    .appendTo("#tweets");
                            });
                        },

                        // method if response has not been successful
                        error: function (xhr, status, error) {
                            alert("An error is occured: " + status);
                        }
                });

                /*
                OR 
                we can use short method

                $.getJSON("https://api.twitter.com/1/statuses/user_timeline.json?callback=?", params, function(data) {
                    console.dir(data);
                })
                .error(function(xhr, status, error) {
                    console.log(xhr);
                });
                */
                });
            }
        </script>
    </body>
</html>

Answer 1

您可以通过两种方式实现这一目标：

您可以在使用jQuery ajax beforeSend()方法

jQuery代码：

$.ajax({
  url: apiEndPoint + "statuses/user_timeline.json",
  beforeSend: function( xhr ) {
    $("#tweets").empty(); 
    // or
    $("#tweets").html('');      
  },
  success: function (response) {
    // perform you operation
  }
})

请求成功执行后替换响应

jQuery代码：

$.ajax({
    url: apiEndPoint + "statuses/user_timeline.json",
    success: function (response) {
        // parse the response
        $("#tweets").html(constructed Response);
    }
})

通过ajax-request删除html代码

1 个答案: