2018-09-15_JSON

JSON APIS and AJAX

  • Description:
    *Introduction to the JSON APIs and AJAX Challenges

    1. Similar to how User Interfaces help people use programs, Application Programming Interfaces (APIs) help programs interact with other programs. APIs are tools that computers use to communicate with one another, in part to send and receive data. You can use API functionality in your page once you understand how to make requests and process data from it. Programmers often use AJAX technologies when working with APIs.

    2. The term AJAX originated as an acronym for Asynchronous JavaScript And XML. It refers to a group of technologies that make asynchronous requests to a server to transfer data, then load any returned data into the page. An asynchronous process has a couple key properties. The browser does not stop loading a page to wait for the server's response. Also, the browser inserts updated data into part of the page without having to refresh the entire page.

    3. User experience benefits from asynchronous processes in several ways. ①Pages load faster since the browser isn't waiting for the server to respond in the middle of a page render. ②Requests and transfers happen in the background, without interrupting what the user is doing. ③When the browser receives new data, only the necessary area of the page refreshes. These qualities especially enhance the user experience for single page applications.

    4. The data transferred between the browser and server is often in a format called JavaScript Object Notation (JSON). JSON resembles JavaScript object literal syntax, except that it's transferred as a string. Once received, it can be converted into an object and used in a script.

    5. This section covers how to transfer and use data using AJAX technologies with a freeCodeCamp API.


1. Handle Click Events with JavaScript using the onclick property

  • Description:

    • You want your code to execute only once your page has finished loading. For that purpose, you can attach a JavaScript event to the document called DOMContentLoaded. Here's the code that does this:
      您希望只在页面加载完成后才执行代码。为此,可以将JavaScript事件附加到名为DOMContentLoaded的文档。下面是这样做的代码:

      document.addEventListener('DOMContentLoaded',function() {
        //your code
      });
      
    • You can implement event handlers that go inside of the DOMContentLoaded function. You can implement an onclick event handler which triggers when the user clicks on the element with id getMessage, by adding the following code:

      document.getElementById('getMessage').onclick=function(){};

  • Demand:
    Add a click event handler inside of the DOMContentLoaded function for the element with id of getMessage.

  • Sample Code:

      <script>
        document.addEventListener('DOMContentLoaded',function(){
          // Add your code below this line
          document.getElementById("getMessage").onclick = function() {
            alert("hello world");
          };
          // Add your code above this line
        });
      </script>
      <style>
        body {
          text-align: center;
          font-family: "Helvetica", sans-serif;
        }
        h1 {
          font-size: 2em;
          font-weight: bold;
        }
        .box {
          border-radius: 5px;
          background-color: #eee;
          padding: 20px 5px;
        }
        button {
          color: white;
          background-color: #4791d0;
          border-radius: 5px;
          border: 1px solid #4791d0;
          padding: 5px 10px 8px 10px;
        }
          button:hover {
          background-color: #0F5897;
          border: 1px solid #0F5897;
        }
      </style>
      <h1>Cat Photo Finder</h1> 
      <p class="message box">
        The message will go here
      </p>
      <p>
        <button id="getMessage">
          Get Message
        </button>
      </p>
    


2. Change Text with click Events

  • Description:

    • When the click event happens, you can use JavaScript to update an HTML element.

    • For example, when a user clicks the "Get Message" button, it changes the text of the element with the class message to say "Here is the message".

    • This works by adding the following code within the click event:

      document.getElementsByClassName('message')[0].textContent="Here is the message";
      
  • Demand:
    Add code inside the onclick event handler to change the text inside the message element to say "Here is the message".

  • Sample Code:

      <script>
        document.addEventListener('DOMContentLoaded',function(){
          document.getElementById('getMessage').onclick=function(){
            // Add your code below this line
            document.getElementsByClassName("message")[0].textContent="Here is the message";
    
            // Add your code above this line
          }
        });
      </script>
      <style>
        body {
          text-align: center;
          font-family: "Helvetica", sans-serif;
        }
        h1 {
          font-size: 2em;
          font-weight: bold;
        }
        .box {
          border-radius: 5px;
          background-color: #eee;
          padding: 20px 5px;
        }
        button {
          color: white;
          background-color: #4791d0;
          border-radius: 5px;
          border: 1px solid #4791d0;
          padding: 5px 10px 8px 10px;
        }
        button:hover {
          background-color: #0F5897;
          border: 1px solid #0F5897;
        }
      </style>
      <h1>Cat Photo Finder</h1> 
      <p class="message box">
        The message will go here
      </p>
      <p>
        <button id="getMessage">
          Get Message
        </button>
      </p>
    


3. Get JSON with the JavaScript XMLHttpRequest Method

  • Description:

    • API

      1. You can also request data from an external source. This is where APIs come into play.

      2. Remember that APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another. You'll learn how to update HTML with the data we get from APIs using a technology called AJAX.

    • JSON

      1. Most web APIs transfer data in a format called JSON. JSON stands for JavaScript Object Notation.

      2. JSON syntax looks very similar to JavaScript object literal notation. JSON has object properties and their current values, sandwiched between a { and a }.

      3. These properties and their values are often referred to as "key-value pairs".

      4. However, JSON transmitted by APIs are sent as bytes, and your application receives it as a string. These can be converted into JavaScript objects, but they are not JavaScript objects by default. The JSON.parse method parses the string and constructs the JavaScript object described by it.

  • Explain:

    • You can request the JSON from freeCodeCamp's Cat Photo API. Here's the code you can put in your click event to do this:

      req=new XMLHttpRequest();
      req.open("GET",'/json/cats.json',true);
      req.send();
      req.onload=function(){
        json=JSON.parse(req.responseText);
        document.getElementsByClassName('message')[0].innerHTML=JSON.stringify(json);
      };
      
    1. Here's a review of what each piece is doing. The JavaScript XMLHttpRequest object has a number of properties and methods that are used to transfer data. First, an instance of the XMLHttpRequest object is created and saved in the req variable.
      下面是对每一部分的回顾。JavaScript XMLHttpRequest对象有许多用于传输数据的属性和方法。首先,在req变量中创建和保存XMLHttpRequest对象的实例。

    2. Next, the open method initializes a request - this example is requesting data from an API, therefore is a "GET" request. The second argument for open is the URL of the API you are requesting data from. The third argument is a Boolean value where true makes it an asynchronous request.
      接下来,open方法初始化一个请求——这个示例从API请求数据,因此是一个“GET”请求。open的第二个参数是请求数据的API的URL。第三个参数是布尔值,true表示异步请求。

    3. The send method sends the request. Finally, the onload event handler parses the returned data and applies the JSON.stringify method to convert the JavaScript object into a string. This string is then inserted as the message text.
      send方法发送请求。最后,onload事件处理程序解析返回的数据并应用JSON.stringify方法将JavaScript对象转换为字符串。然后这个字符串作为消息文本插入。

  • Demand:
    Update the code to create and send a "GET" request to the freeCodeCamp Cat Photo API. Then click the "Get Message" button. Your AJAX function will replace the "The message will go here" text with the raw JSON output from the API.

  • Sample Code:

        <script>
        document.addEventListener('DOMContentLoaded',function(){
          document.getElementById('getMessage').onclick=function(){
            // Add your code below this line
            const req = new XMLHttpRequest();
            req.open("GET", "/json/cats.json", true);
            req.send();
            req.onload=function() {
              json = JSON.parse(req.responseText),
              document.getElementsByClassName("message")[0].innerHTML=JSON.stringify(json);
            }
    
            // Add your code above this line
          };
        });
      </script>
      <style>
        body {
          text-align: center;
          font-family: "Helvetica", sans-serif;
        }
        h1 {
          font-size: 2em;
          font-weight: bold;
        }
        .box {
          border-radius: 5px;
          background-color: #eee;
          padding: 20px 5px;
        }
        button {
          color: white;
          background-color: #4791d0;
          border-radius: 5px;
          border: 1px solid #4791d0;
          padding: 5px 10px 8px 10px;
        }
        button:hover {
          background-color: #0F5897;
          border: 1px solid #0F5897;
        }
      </style>
      <h1>Cat Photo Finder</h1> 
      <p class="message box">
        The message will go here
      </p>
      <p>
        <button id="getMessage">
          Get Message
        </button>
      </p>
    


4. Access the JSON Data from an API

  • Description:

    • In the previous challenge, you saw how to get JSON data from the freeCodeCamp Cat Photo API.

    • Now you'll take a closer look at the returned data to better understand the JSON format. Recall some notation in JavaScript:

      [ ] -> Square brackets represent an array
      { } -> Curly brackets represent an object
      " " -> Double quotes represent a string. 
          -> They are also used for key names in JSON
      
    • Understanding the structure of the data that an API returns is important because it influences how you retrieve the values you need.

    • On the right, click the "Get Message" button to load the freeCodeCamp Cat Photo API JSON into the HTML.

    • The first and last character you see in the JSON data are square brackets [ ]. This means that the returned data is an array. The second character in the JSON data is a curly { bracket, which starts an object. Looking closely, you can see that there are three separate objects. The JSON data is an array of three objects, where each object contains information about a cat photo.
      JSON数据中的第一个和最后一个字符是方括号[]。这意味着返回的数据是一个数组。JSON数据中的第二个字符是一个花括号,它启动一个对象。仔细观察,你会发现有三个独立的对象。JSON数据是一个包含三个对象的数组,每个对象都包含关于cat照片的信息。

    • You learned earlier that objects contain "key-value pairs" that are separated by commas. In the Cat Photo example, the first object has "id":0 where "id" is a key and 0 is its corresponding value. Similarly, there are keys for "imageLink", "altText", and "codeNames". Each cat photo object has these same keys, but with different values.
      您在前面了解到,对象包含由逗号分隔的“键-值对”。在Cat Photo示例中,第一个对象有“id”:0,其中“id”是键,0是对应的值。类似地,还有“imageLink”、“altText”和“codeNames”的键。每个cat photo对象都有相同的键,但是值不同。

    • Another interesting "key-value pair" in the first object is "codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]. Here "codeNames" is the key and its value is an array of three strings. It's possible to have arrays of objects as well as a key with an array as a value.

    • Remember how to access data in arrays and objects. Arrays use bracket notation to access a specific index of an item. Objects use either bracket or dot notation to access the value of a given property. Here's an example that prints the "altText" of the first cat photo - note that the parsed JSON data in the editor is saved in a variable called json:

      console.log(json[0].altText);
      // Prints "A white cat wearing a green helmet shaped melon on its head."
      
  • Demand:
    For the cat with the "id" of 2, print to the console the second value in the codeNames array. You should use bracket and dot notation on the object (which is saved in the variable json) to access the value.

  • Sample Code:

    <script>
        document.addEventListener('DOMContentLoaded',function(){
          document.getElementById('getMessage').onclick=function(){
            req=new XMLHttpRequest();
            req.open("GET",'/json/cats.json',true);
            req.send();
            req.onload=function(){
              json=JSON.parse(req.responseText);
              document.getElementsByClassName('message')[0].innerHTML=JSON.stringify(json);
              // Add your code below this line
              console.log(json[2].codeNames[1]);
    
              // Add your code above this line
            };
          };
        });
      </script>
      <style>
        body {
          text-align: center;
          font-family: "Helvetica", sans-serif;
        }
        h1 {
          font-size: 2em;
          font-weight: bold;
        }
        .box {
          border-radius: 5px;
          background-color: #eee;
          padding: 20px 5px;
        }
        button {
          color: white;
          background-color: #4791d0;
          border-radius: 5px;
          border: 1px solid #4791d0;
          padding: 5px 10px 8px 10px;
        }
        button:hover {
          background-color: #0F5897;
          border: 1px solid #0F5897;
        }
      </style>
      <h1>Cat Photo Finder</h1> 
      <p class="message box">
        The message will go here
      </p>
      <p>
        <button id="getMessage">
          Get Message
        </button>
      </p>
    


5. Convert JSON Data to HTML

  • Description:

    • Now that you're getting data from a JSON API, you can display it in the HTML.

    • You can use a forEach method to loop through the data since the cat photo objects are held in an array. As you get to each item, you can modify the HTML elements.

      1. First, declare an html variable with var html = "";.

      2. Then, loop through the JSON, adding HTML to the variable that wraps the key names in strong tags, followed by the value. When the loop is finished, you render it.

    • Here's the code that does this:

      json.forEach(function(val) {
        var keys = Object.keys(val);
        html += "<div class = 'cat'>";
        keys.forEach(function(key) {
          html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
        });
        html += "</div><br>";
      });
      
    • Add a forEach method to loop over the JSON data and create the HTML elements to display it.

    • Here is some example JSON

      [
        {
          "id":0,
            "imageLink":"https://s3.amazonaws.com/freecodecamp/funny-cat.jpg",
            "altText":"A white cat wearing a green helmet shaped melon on its head. ",
            "codeNames":[ "Juggernaut", "Mrs. Wallace", "Buttercup"
          ]
        }
      ] 
      
  • Sample Code:

    <script>
        document.addEventListener('DOMContentLoaded',function(){
          document.getElementById('getMessage').onclick=function(){
            req=new XMLHttpRequest();
            req.open("GET",'/json/cats.json',true);
            req.send();
            req.onload=function(){
              json=JSON.parse(req.responseText);
              var html = "";
              // Add your code below this line
              json.forEach(function(val) {
                var keys = Object.keys(val);
                html += "<div class='cat'>";
                keys.forEach(function(key) {
                  html += "<strong>" + key + "</strong>: " + val[key] + "<br/>";
                });
                html += "</div><br>"
              });
              // Add your code above this line
              document.getElementsByClassName('message')[0].innerHTML=html;
            };
          };
        });
      </script>
      <style>
        body {
          text-align: center;
          font-family: "Helvetica", sans-serif;
        }
        h1 {
          font-size: 2em;
          font-weight: bold;
        }
        .box {
          border-radius: 5px;
          background-color: #eee;
          padding: 20px 5px;
        }
        button {
          color: white;
          background-color: #4791d0;
          border-radius: 5px;
          border: 1px solid #4791d0;
          padding: 5px 10px 8px 10px;
        }
        button:hover {
          background-color: #0F5897;
          border: 1px solid #0F5897;
        }
      </style>
      <h1>Cat Photo Finder</h1> 
      <p class="message box">
        The message will go here
      </p>
      <p>
        <button id="getMessage">
          Get Message
        </button>
      </p>
    


6. Render Images from Data Sources

  • Description:

    • The last few challenges showed that each object in the JSON array contains an imageLink key with a value that is the URL of a cat's image.

    • When you're looping through these objects, you can use this imageLink property to display this image in an img element.

    • Here's the code that does this:

      html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";
      
  • Demanda:
    Add code to use the imageLink and altText properties in an img tag.

  • Sample Code:

      <script>
        document.addEventListener('DOMContentLoaded',function(){
          document.getElementById('getMessage').onclick=function(){
            req=new XMLHttpRequest();
            req.open("GET",'/json/cats.json',true);
            req.send();
            req.onload=function(){
              json=JSON.parse(req.responseText);
              var html = "";
              json.forEach(function(val) {
                html += "<div class = 'cat'>";
                // Add your code below this line
                html += "<img src='" + val.imageLink + "' " + "alt='" + val.altText + "'>"
    
                // Add your code above this line
                html += "</div><br>";
              });
              document.getElementsByClassName('message')[0].innerHTML=html;
            };
           };
        });
      </script>
      <style>
        body {
          text-align: center;
          font-family: "Helvetica", sans-serif;
        }
        h1 {
          font-size: 2em;
          font-weight: bold;
        }
        .box {
          border-radius: 5px;
          background-color: #eee;
          padding: 20px 5px;
        }
        button {
          color: white;
          background-color: #4791d0;
          border-radius: 5px;
          border: 1px solid #4791d0;
          padding: 5px 10px 8px 10px;
        }
        button:hover {
          background-color: #0F5897;
          border: 1px solid #0F5897;
        }
      </style>
      <h1>Cat Photo Finder</h1> 
      <p class="message box">
        The message will go here
      </p>
      <p>
        <button id="getMessage">
          Get Message
        </button>
      </p>
    


7. Pre-filter JSON to Get the Data You Need

  • Description:

    • If you don't want to render every cat photo you get from the freeCodeCamp Cat Photo API, you can pre-filter the JSON before looping through it.

    • Given that the JSON data is stored in an array, you can use the filter method to filter out the cat whose "id" key has a value of 1.

    • Here's the code to do this:

      json = json.filter(function(val) {
        return (val.id !== 1);
      });
      
  • Demand:
    Add code to filter the json data to remove the cat with the "id" value of 1.

  • Sample Code:

      <script>
            document.addEventListener('DOMContentLoaded',function(){
              document.getElementById('getMessage').onclick=function(){
                req=new XMLHttpRequest();
                req.open("GET",'/json/cats.json',true);
                req.send();
                req.onload=function(){
                  json=JSON.parse(req.responseText);
                  var html = "";
                  // Add your code below this line
                  json = json.filter((val) => json.id !== 1)
    
                  // Add your code above this line
                   json.forEach(function(val) {
                     html += "<div class = 'cat'>"
    
                     html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>"
    
                     html += "</div>"
                   });
                   document.getElementsByClassName('message')[0].innerHTML=html;
                 };
               }; 
            });
          </script>
          <style>
            body {
              text-align: center;
              font-family: "Helvetica", sans-serif;
            }
            h1 {
              font-size: 2em;
              font-weight: bold;
            }
            .box {
              border-radius: 5px;
              background-color: #eee;
              padding: 20px 5px;
            }
            button {
              color: white;
              background-color: #4791d0;
              border-radius: 5px;
              border: 1px solid #4791d0;
              padding: 5px 10px 8px 10px;
            }
            button:hover {
              background-color: #0F5897;
              border: 1px solid #0F5897;
            }
          </style>
          <h1>Cat Photo Finder</h1> 
          <p class="message box">
            The message will go here
          </p>
          <p>
            <button id="getMessage">
              Get Message
            </button>
          </p>
    


8. Get Geolocation Data to Find A User's GPS Coordinates

(获取地理位置数据以找到用户的GPS坐标)

  • Description:

    • Another cool thing you can do is access your user's current location. Every browser has a built in navigator that can give you this information.

    • The navigator will get the user's current longitude and latitude.

    • You will see a prompt to allow or block this site from knowing your current location. The challenge can be completed either way, as long as the code is correct.

    • By selecting allow, you will see the text on the output phone change to your latitude and longitude.

    • Here's code that does this:

      if (navigator.geolocation){
        navigator.geolocation.getCurrentPosition(function(position) {
          document.getElementById('data').innerHTML="latitude: "+ position.coords.latitude + "<br>longitude: " + position.coords.longitude;
        });
      }
      
    • First, it checks if the navigator.geolocation object exists. If it does, the getCurrentPosition method on that object is called, which initiates an asynchronous request for the user's position. If the request is successful, the callback function in the method runs. This function accesses the position object's values for latitude and longitude using dot notation and updates the HTML.

  • Demand:
    Add the example code inside the script tags to check a user's current location and insert it into the HTML.

  • Sample Code:

      <script>
        // Add your code below this line
        if(navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position){
            let html = "";
            document.getElementById("data").innerHTML = "latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude;
          });
        }
    
        // Add your code above this line
      </script>
      <h4>You are here:</h4>
      <div id="data">
    
      </div>
    


9. Post Data with the JavaScript XMLHttpRequest Method

  • Description:

    • In the previous examples, you received data from an external resource. You can also send data to an external resource, as long as that resource supports AJAX requests and you know the URL.

    • JavaScript's XMLHttpRequest method is also used to post data to a server. Here's an example:

      req=new XMLHttpRequest();
      req.open("POST",url,true);
      req.setRequestHeader('Content-Type','text/plain');
      req.onreadystatechange=function(){
        if(req.readyState==4 && req.status==200){
          document.getElementsByClassName('message')[0].innerHTML=req.responseText;
        }
      };
      req.send(userName);
      
    • You've seen several of these methods before. Here the open method initializes the request as a "POST" to the given URL of the external resource, and uses the true Boolean to make it asynchronous.

    • The setRequestHeader method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the open method, but before the send method. The two parameters are the name of the header and the value to set as the body of that header.

    • Next, the onreadystatechange event listener handles a change in the state of the request. A readyState of 4 means the operation is complete, and a status of 200 means it was a successful request. The document's HTML can be updated.

    • Finally, the send method sends the request with the userName value, which was given by the user in the input field.

  • Demand:
    Update the code to create and send a "POST" request. Then enter your name in input box and click "Send Message". Your AJAX function will replace "Reply from Server will be here." with the reply of the server. In this case, it is your name appended with " loves cats".

  • Sample Code:

      <script>
        document.addEventListener('DOMContentLoaded',function(){
          document.getElementById('sendMessage').onclick=function(){
    
            var userName=document.getElementById('name').value;
            // Add your code below this line
            let req = new XMLHttpRequest();
            req.open("POST", url, true);
            req.setRequestHeader("Content-Type", "text/plain");
            req.onreadystatechange = function() {
              if(req.readyState == 4 && req.status == 200) {
                document.getElementsByClassName("message")[0].innerHTML = req.responseText;
              }
              req.send(userName);
            }
    
            // Add your code above this line
          };
        });
      </script>
      <style>
        body {
          text-align: center;
          font-family: "Helvetica", sans-serif;
        }
        h1 {
          font-size: 2em;
          font-weight: bold;
        }
        .box {
          border-radius: 5px;
          background-color: #eee;
          padding: 20px 5px;
        }
        button {
          color: white;
          background-color: #4791d0;
          border-radius: 5px;
          border: 1px solid #4791d0;
          padding: 5px 10px 8px 10px;
        }
        button:hover {
          background-color: #0F5897;
          border: 1px solid #0F5897;
        }
      </style>
      <h1>Cat Friends</h1> 
      <p class="message box">
        Reply from Server will be here
      </p>
      <p>
        <label for="name">Your name:
          <input type="text" id="name"/>
        </label>
        <button id="sendMessage">
          Send Message
        </button>
      </p>
    
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容