iT邦幫忙

0

ajax時有反應時無

做了一個連結開放平台的ajax
點擊選單有時會出現資料
有時不會出現,或是出現一下子又消失
想請問是哪邊出問題,謝謝

<h1>高雄違規照相查詢</h1>
<form class="container">
  <div class="row">
     <div class="form-group ">
    <select name="abc" id="dist" class="form-control col-sm-8">
      <option value="三民區">三民區</option>
      <option value="小港區">小港區</option>
      <option value="左營區">左營區</option>
      <option value="前鎮區">前鎮區</option>
      <option value="苓雅區">苓雅區</option>
      <option value="前金區">前金區</option>
      <option value="新興區">新興區</option>
      <option value="楠梓區">楠梓區</option>
      <option value="鼓山區">鼓山區</option>
      <option value="楠梓區">楠梓區</option>
      <option value="鹽埕區">鹽埕區</option>
      <option value="鳳山區">鳳山區</option>
      <option value="楠梓區">楠梓區</option>
      <option value="大寮區">大寮區</option>
      <option value="仁武區">仁武區</option>
      <option value="林園區">林園區</option>
      <option value="岡山區">岡山區</option>
      <option value="路竹區">路竹區</option>
      <option value="旗山區">旗山區</option>
      <option value="橋頭區">橋頭區</option>
      <option value="燕巢區">燕巢區</option>
      <option value="美濃區">美濃區</option>
      <option value="鳥松區">鳥松區</option>
      <option value="湖內區">湖內區</option>
      <option value="梓官區">梓官區</option>
      <option value="永安區">永安區</option>
      <option value="茄萣區">茄萣區</option>
      <option value="彌陀區">彌陀區</option>
      <option value="六龜區">六龜區</option>
      <option value="大社區">大社區</option>
    </select>
    <button id="search" class="btn">搜尋</button>
  </div>
  </div>
 
</form>
<div class="container">
  <table id="content" class="table">
    <thead>
      <tr>
        <th>測照地點</th>
        <th>測照方向</th>
        <th>違規原因</th>
      </tr>
    </thead>
    <tbody id="input">
    </tbody>
  </table>
</div>
$(function() {
  $("#search").click(function() {
    $("#input").html("");
    $.ajax({
      method: "GET",
      url: "https://data.kaohsiung.gov.tw/Opendata/DownLoad.aspx?Type=2&CaseNo1=AF&CaseNo2=1&FileType=2&Lang=C&FolderType=O",
      dataType: "json"
    })
      .done(function(msg) {
        $.each(msg,function(index, elm) {
          if($("#dist").val() == elm["行政區"]) {
            var data = "<tr>" + 
                       "<td>" + elm['測  照  地  點'] + "</td>" +
                       "<td>" + elm['測照方向'] + "</td>" + 
                       "<td>" + elm['功能'] + "</td>" + 
                       "</tr>";
            $("#input").append(data);
          }
        });
      });
  });
});
看更多先前的討論...收起先前的討論...
Rach iT邦新手 5 級 ‧ 2017-11-22 01:41:03 檢舉
有沒有plunk可以提供下?
timloo iT邦研究生 2 級 ‧ 2017-11-22 09:15:29 檢舉
在這裏發現了很多網友抓open data的應用,有一次是有關台北的捷運到站資訊,也會發現有你講的情況,當下並沒覺得奇怪,也許是即時資訊,抓的時候還沒產生,
像您抓的條件,"Type=2&CaseNo1=AF&CaseNo2=1&FileType=2&Lang=C&FolderType=O",是歷史資料,還是即時資料? 而且可以過濾行政區,一定會有資料嗎?

一般應該是資料來源的問題,這種程式也沒什麼好測,測一下連線是不是正常,或是詢問一下資料的產生,是不是有其周期?

json裏面可以放照片檔嗎?? base64
fillano iT邦超人 1 級 ‧ 2017-11-22 09:16:57 檢舉
除了button要加上`type="button"`會比較好,不然可能會把form送出而沒觸發click事件外,沒看到其他問題。你有用開發工具看一下是否發生錯誤嗎?
opendata一般不是不建議當成ajax的endpoint使用嗎?
Abner iT邦新手 5 級 ‧ 2017-11-22 10:12:37 檢舉
謝謝大家的回答
to timeloo: 他應該是會更新的資訊,我當下也有跟你一樣的想法,所以我有找跟我用一樣data的網站,發現他的沒問題,所以應該不是更新的問題
to fillano: console沒有問題,結果問題竟然是出在大大建議的type="button,加上去之後就好了,以後都會加上type了
剛試了一下,真的是加上 type=button 就可以了跑了,可是 $("#search").click明明就有觸發 但 ajax確沒有觸發,有人知道為何如此嗎?純好奇想了解
你可以試試 fetch
fillano iT邦超人 1 級 ‧ 2017-11-22 14:58:37 檢舉
因為form被submit了,導致頁面重新載入,ajax的動作就被放棄了。
我也遇過忘記加 type=button 一直以為用 <button> 就不用加 type,找了好久好久才發現 XD
要使用AJAX, 就不須 form 了

1 個回答

0
Go7hic
iT邦新手 5 級 ‧ 2017-11-24 17:04:29

不用 form 表单就可以了,把form 标签换成 div 或者去掉,或者改一下 搜尋

我要發表回答

立即登入回答