| success: function (data) { // request 取得成功獲得回復後實行 let list_html = ''; $.each(data, function (index, item) { console.log(item.item_id); console.log(item.star); list_html = `<li data-id="${item.item_id}" data-star="${item.star}" data-sort="${item.sort}"> <div class="item_flex"> <div class="left_block"> <div class="btn_flex"> <button type="button" class="btn_up">往上面</button> <button type="button" class="btn_down">向下</button> </div> </div> <div class="middle_block"> <div class="star_block"> <span class="star" data-star="1"><i class="fas fa-star"></i></span> <span class="star" data-star="2"><i class="fas fa-star"></i></span> <span class="star" data-star="3"><i class="fas fa-star"></i></span> <span class="star" data-star="4"><i class="fas fa-star"></i></span> <span class="star" data-star="5"><i class="fas fa-star"></i></span> </div> <p class="para">${item.name}</p> <input type="text" class="task_name_update -none" placeholder="升級待辦事宜…" value="${item.name}"> </div> <div class="right_block"> <div class="btn_flex"> <button type="button" class="btn_update">升級</button> <button type="button" class="btn_delete">清除</button> </div> </div> </div> </li>` }); $("ul.task_list").html(list_html); }, AJAX 從伺服驅動器獲得JSON列陣 串連在HTML里 想要知道為何麼我的each循壞只能抓數據庫索引數值1的json列陣放進去?? 這也是教師的案例 我還是看不出來區別在哪兒求得 success: function(data){ // request 取得成功獲得回復後實行 console.log(data); let list_html = ''; $.each(data, function(index, item){ list_html = '<li data-id="' item.item_id '" data-star="' item.star '" data-sort="' item.sort '">'; list_html = '<div class="item_flex">'; list_html = '<div class="left_block">'; list_html = '<div class="btn_flex">'; list_html = '<button type="button" class="btn_up">往上面</button>'; list_html = '<button type="button" class="btn_down">向下</button>'; list_html = '</div>'; list_html = '</div>'; list_html = '<div class="middle_block">'; list_html = '<div class="star_block">'; list_html = '<span class="star' (item.star >= 1 ? " -on" : "") '" data-star="1"><i class="fas fa-star"></i></span>'; list_html = '<span class="star' (item.star >= 2 ? " -on" : "") '" data-star="2"><i class="fas fa-star"></i></span>'; list_html = '<span class="star' (item.star >= 3 ? " -on" : "") '" data-star="3"><i class="fas fa-star"></i></span>'; list_html = '<span class="star' (item.star >= 4 ? " -on" : "") '" data-star="4"><i class="fas fa-star"></i></span>'; list_html = '<span class="star' (item.star >= 5 ? " -on" : "") '" data-star="5"><i class="fas fa-star"></i></span>'; list_html = '</div>'; list_html = '<p class="para">' item.name '</p>'; list_html = '<input type="text" class="task_name_update -none" placeholder="升級待辦事宜…" value="' item.name '">'; list_html = '</div>'; list_html = '<div class="right_block">'; list_html = '<div class="btn_flex">'; list_html = '<button type="button" class="btn_update">升級</button>'; list_html = '<button type="button" class="btn_delete">清除</button>'; list_html = '</div>'; list_html = '</div>'; list_html = '</div>'; list_html = '</li>'; }); $("ul.task_list").html(list_html); },[ { "item_id": 899, "name": "一二三", "star": 0, "sort": 1 }, { "item_id": 118, "name": "四五六", "star": 0, "sort": 1 }]這也是json獲得的內容 為一個列陣 |
