iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 17
1
自我挑戰組

網頁學習日誌系列 第 17

AJAX : 網頁顯示資料-Jquery篇

本篇案例與之前javascript一樣的功能,按下按鈕將遠端json資料呈現在網頁上。
只不過是用jquery來寫,在此用兩種寫法呈現:

  1. 顯示是否有抓到資料
  2. 顯示json資料在網頁上

html:

功能是按下按鈕下方就會顯示遠端抓取的文字

<button class="btn">遊樂園資訊</button> //按下按鈕顯示下方內容
<ul class="info">
// json資料轉成li顯示於此
</ul>

jquery:

1.顯示是否有抓到資料(success、error)

設定成功就在按鈕下方顯示「抓到資料囉!」
若失敗則跳出警告視窗「請再確認程式!!」

ajax()抓取資料的方法:

w3c:http://www.w3school.com.cn/jquery/ajax_ajax.asp

$.ajax([settings])
//或是下方寫法
$.ajax(url[, settings])

網友整理的ajax()
https://dotblogs.com.tw/jasonyah/2013/06/02/use-ajax-you-need-to-be-care

$.ajax({
    url: '',                        // url位置
    type: 'post',                   // post/get
    data: { querytag: data },       // 輸入的資料
    error: function (xhr) { },      // 錯誤後執行的函數
    success: function (response) { }// 成功後要執行的函數
});

依照上面ajax()寫法,想要呈現是否有抓到資料(成功/失敗),如下方語法所示:

$.ajax({
url:'https://ruienyuski.github.io/git_test/data.json',
success:function(response){$('.info').html('抓到資料囉!');},
error:function(xhr){alert("發生錯誤: " + xhr.status + " " + xhr.statusText);}
 });
 //w3c:如何使用錯誤設置來應對一個AJAX請求錯誤。
 //https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_ajax_error

結果如下圖:

https://ithelp.ithome.com.tw/upload/images/20200411/20107321CO5DhOH0lj.png

https://ithelp.ithome.com.tw/upload/images/20200411/20107321i3e10NjrQo.png

2.顯示json資料在網頁上

當成功載入資料時,就寫把遠端資料用append()插入在ul標籤內,變成 ul li清單列,
下方用$.each來遍歷(循環訪問),達到串接成 「li」+「標題」+「陣列文字」的一組li資料

$.each用法可看原文官網會比較清楚
http://api.jquery.com/jQuery.each/
網友整理$.each的用法
https://lingmissing.github.io/myBlog/2016/05/19/each-use/

success: function (response) { 
$.each(response, function(index, element){ //$.each成功後執行的函數(respnose)
//index,element兩者都可隨意命名,index:選擇器的index位置,element;當前的元素
  }
}

串接語法參考來源:
https://stackoverflow.com/questions/8951810/how-to-parse-json-data-with-jquery-javascript

$('<li>',{text: [index+1]+'.'+'名稱:'+element.place})

結果如下:

    success: function (response) { 
        $.each(response, function(index, element) {
            $('.info').append(
                    $('<li>', 
                    {text: [index+1]+'.'+'名稱:'+element.place}),
                    $('<li>',
                    {text: [index+1]+'.'+'地址:'+element.address}),
                    $('<p>')
                    );
        });
    }

最後只要加入button按下的事件就完成了!!

https://ithelp.ithome.com.tw/upload/images/20200411/20107321S9xuhRAJzS.png

codepen網址:https://codepen.io/yuski/pen/NXxbQo


上一篇
AJAX : 網頁顯示資料-JS篇
下一篇
SASS:維護CSS好幫手
系列文
網頁學習日誌30

1 則留言

0
火爆浪子
iT邦研究生 1 級 ‧ 2018-12-07 11:56:18

能抓到的錯誤訊息好像就只有 code ?好像沒有更詳細的原因?

yuski iT邦新手 4 級 ‧ 2018-12-07 20:47:43 檢舉

錯誤訊息回應範例是用簡單的 xhr.status 和 xhr.statusText,如果是json位址錯誤就顯示404找不到的訊息

我要留言

立即登入留言