js動態添加，jq，ajax-有解無憂

首先 NO COPY！ NO COPY！ NO COPY！
這只是提供思路的，要是復制粘貼必被發現好吧，而且不做修改應該是運行不起來的，

只貼了js的代碼，這次css和html不重要

$(document).ready(function(){
    function Object(){
        this.key_name="test1";
        this.text="11";
    }
    getList();
    addbutton(); 
    function getList() {
        $.getJSON("data.json", function (res) {
            let str = "";
            $.each(res, function (i, obj) {
                str = "<span class='title'>" + obj.user + "</span>" + "<br/>" + "<span class='text'>" + obj.text + "</span>";
                $(".list").append("<ul><li  class='borderShadow'>" + str + "</li></ul>");
            });
           animateLis();

        });
    }

    function addbutton(){
        $(".container").append("<input id='btnAdd' type='button' value='我也要吐槽'/>");
        $("#btnAdd").text("我也要吐槽");

    }

    function savePostToStorage(value){
        var num = new Object();
        num.key_name = localStorage.getItem("userName");
        num.text = value;

        localStorage.setItem(num.text,num.key_name);
        alert("上傳完成");
    }

    $(document).on("click","#btnAdd",function(e){
        if($("#btnAdd").text()==='我也要吐槽'){
            $("#btnAdd").attr('value','吐槽完畢');
            $("#btnAdd").text("寫的是真的冗余");
            $(".form").show();

        }else{
            $(".form").hide();
            $("#btnAdd").text('我也要吐槽');
            $("#btnAdd").attr('value','我也要吐槽');

            savePostToStorage($("#post_text").val());
            addPostToPage();
            $("#post_text").val("");
        }
    });


    function addPostToPage(){
        str = "<span class='title'>" + localStorage.getItem("userName") + "</span>" + "<br/>" + "<span class='text'>" + localStorage.getItem("userText") + "</span>";
        $(".list").append("<ul style='display: block'><li  >" + str + "</li></ul>");
    }

function animateLis(){
        var time=0;
      $('.list ul').each(function (i){
           $(".list ul").eq(i).delay(time).fadeIn(500);
           time+=1000;
       });
        $("#btnAdd").delay(time).animate({opacity:1});

    }
});

關于web服務器的事
要是不用服務器，用戶名始終是null
在這里插入圖片描述

首先要下一個wampserver，并且啟動之后要是綠色的，不是綠色的自己百度下，每個人問題都不一樣我也不知道，

變成綠色后左鍵單擊會有一個www directory，把整個工程的檔案夾放進去
在這里插入圖片描述

然后在瀏覽器里輸入地址 http://127.0.0.1/(你檔案夾所在位置)
舉個例子這里我要輸入的網址就是 http://127.0.0.1/class/ex7/index.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/277691.html

標籤：其他

上一篇：Promise/A+規范+ECMAScript6的Promsie的擴展api原始碼實作

下一篇：vue首次渲染全程序