iT邦幫忙

1

如果我要利用 input 後 按紐後能得到我要查詢的目標 要如何調整

各位好
我想在查詢後按了按鈕 可以把我查詢的資料給顯示出來
第二個是 cors.js
第三個是 preloader.js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>舞蹈表演資訊 demo</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
</head>

<body>
        <div class="container">
                <div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <input type="email" class="form-control" id="inputEmail4" placeholder="高雄市">
                        </div>
                    </div>
            </div>
        
    <button id="getStation" type="button" class="btn btn-primary">獲取</button>
    
    <table class="table table-bordered table-dark">
        <thead>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" 
        ntegrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" 
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
<script src="js/jquery.preloaders.js"></script>
<script src="js/cors.js"></script>

</html>
let originalURL = "https://cloud.culture.tw/frontsite/trans/SearchShowAction.do?method=doFindTypeJ&category=3";
let queryURL = "https://cors-anywhere.herokuapp.com/" + originalURL

$.preloader.start();

$(document).ready(function () {

  $.preloader.stop();
  $("#getStation").click(function () {
    let table = $('table');
    let table_head = $('table thead')
    let table_body = $('table tbody');

    table_head.empty() // 清除子元素
    table_body.empty() // 清除子元素

    $.preloader.start();
    $.ajax({
      url: queryURL,
      method: "GET",
      dataType: "json",
      // this headers section is necessary for CORS-anywhere
      headers: {
        "x-requested-with": "xhr"
      }
    }).done(function (response) {
      $.preloader.stop();
      let thead = $(`
              <td>活動名稱</td>
              <td scope="col">時間</td>
              <td scope="col">地點</td>
              <td scope="col">地址</td>
              <td scope="col">售票價錢</td>
        `);
      $('table thead').append(thead)
      $.each(response, function (i, data) {
        if (data.showInfo) {
          $.each(data.showInfo, function (j, info) {
            //console.log(data);
            let tr = $(`
             <tr>
               <td scope="row">`+ data['title'] + `</td>
               <td>`+ info['time'] + `</td>
               <td>`+ info['locationName'] + `</td>
               <td>`+ info['location'] + `</td>
               <td>`+ info['price'] + `</td>             
             </tr>
            `);
            table_body.append(tr);
          });
        }
      });
    }).fail(function (jqXHR, textStatus) {
      console.error(textStatus)
    })
  });

});

/*
 * Creado por ebc erick benites erickpm.
 * Generador de sprites.png: http://preloaders.net/en/popular (escoger APNG, transparent, 64x64 o nxn, download as sprite y solo considerar el png) (Usa IE para Generador)
 */
;(function($) {

	// Get script path
	var scriptPath = document.getElementsByTagName('script')[document.getElementsByTagName('script').length - 1].src;
	var scriptFolder = scriptPath.substr(0, scriptPath.lastIndexOf( '/' )+1 );

	$.fn.preloader = function(options) {

		if(options == 'stop'){
			clearTimeout($(this).data('interval'));
    		$(this).hide();
    		return;
		}

		// Merge passed options with defaults
		var opts = $.extend({}, $.fn.preloader.defaults, options);

		return this.each(function() {
			// Merge in the metadata elements for this specific node
			var o = $.metadata ? $.extend({}, opts, $.metadata.get(this)) : opts;
			_preloaderStart(o, $(this));
		});
	};

	// Preloader plugin default options
	$.fn.preloader.defaults = {
		speed : 100,	// Miliseconds between frames (ms)
        src : scriptFolder + '../img/sprites1.png',
        modal : false,
        className : false,

        width : false,
        height : false,
        frames : false
	};

	// Define our base to add to
	$.preloader = {};

	// Static Function
	$.preloader.start = function(options) {
		// Merge passed options with defaults
		var opts = $.extend({}, $.fn.preloader.defaults, options);

		_preloaderStart(opts);
	}

	// Static Function
	$.preloader.stop = function() {

		_preloaderStop();

	}


	// Your privates functions code ...

    function _preloaderStart(opts, e) {

    	clearTimeout($(e).data('interval'));

    	if(!e){

    		if(opts.modal){
    			$('<div/>').addClass('jquery-preloader-overlay').css({
					position: 'fixed',
					top: '0',
					left: '0',
					height: '100%',
					width: '100%',
					backgroundColor: 'rgba(0,0,0,0.5)',
					display: 'none',
					'z-index': '9998'
    			}).appendTo(document.body).fadeIn('slow'); //.click(function(){_preloaderStop()});
    		}

    		e = $('<div/>').addClass('jquery-preloader').css({
					position: 'fixed',
				    top: '50%',
				    left: '50%',
					'z-index': '9999'
				}).appendTo(document.body);

    		if(opts.position == 'top-left')
    			e.css({top: '0%', left: '0%'});
    		else if(opts.position == 'top-right')
    			e.css({top: '0%', left: '100%'});
    		else if(opts.position == 'bottom-left')
    			e.css({top: '100%', left: '0%'});
    		else if(opts.position == 'bottom-right')
    			e.css({top: '100%', left: '100%'});
    		else if(opts.position && (opts.position.top || opts.position.left)){
    			if(opts.position.top || opts.position.left)
    				e.css({top: opts.position.top});
    			if(opts.position.top || opts.position.left)
    				e.css({left: opts.position.left});
    		}

    		if(opts.className) e.addClass(opts.className);
    	}

    	if(opts.src.indexOf('/') == -1) opts.src = scriptFolder + 'img/' + opts.src;

		genImage = new Image();
		genImage.src=opts.src;

		genImage.onload=function (){

			if(!opts.frames) opts.frames = this.width / this.height;
			if(!opts.height) opts.height = this.height;
			if(!opts.width) opts.width = this.width / opts.frames;

			if(!$(e).is(":visible")) $(e).show();

			$(e).css('background-image', 'url('+opts.src+')');

			$(e).css('width', opts.width+'px');
			$(e).css('height', opts.height+'px');

			if($(e).hasClass('jquery-preloader')){
				$(e).css('marginLeft', -opts.width/2+'px');
				$(e).css('marginTop', -opts.height/2+'px');

				if(opts.position == 'top-left')
	    			e.css({marginLeft: '10px', marginTop: '10px'});
	    		else if(opts.position == 'top-right')
	    			e.css({marginLeft: (-opts.width - 10) + 'px', marginTop: '10px'});
	    		else if(opts.position == 'bottom-left')
	    			e.css({marginLeft: '10px', marginTop: (-opts.height - 10) + 'px'});
	    		else if(opts.position == 'bottom-right')
	    			e.css({marginLeft: (-opts.width - 10) + 'px', marginTop: (-opts.height - 10) + 'px'});
			}

			var interval = setInterval(function(){

				var xpos = ($(e).data('xpos'))?$(e).data('xpos'):0;	// Get xpos from element's metadata

				xpos += parseInt(opts.width);	// Slide position
				//console.log(e.css('left') + '-'+$(e).data('xpos'));

				if(xpos/opts.width >= opts.frames) xpos = 0;	// Reset position

				$(e).css('background-position', -xpos + 'px 0');	// Style execute

				$(e).data('xpos', xpos);	// Set xpos to element's metadata

			}, opts.speed);

			$(e).data('interval', interval);

		};

		genImage.onerror=function(){
			if(console) console.log('No se pudo cargar el preloader');
		};

		return e;

    }

    function _preloaderStop(){

    	$('div.jquery-preloader').each(function(){
    		clearTimeout($(this).data('interval'));
    		$(this).remove();
    	});
    	$('div.jquery-preloader-overlay').remove();

    }

})(jQuery);

$(function(){
	// How to use:
	//
	// var e = $('#loader').preloader({src:'sprites.png', frames:8, width:64, height:64, speed:9, className: 'mycss'}); // src: (in js/jquery/preloaders/img path)
	// var e = $('#loader').preloader('stop');
	//
	// $.preloader.start({modal: true, position:'top-right'}); // position: [(default:'center') | 'top-left' | 'top-right' | ' bottom-left' | 'bottom-right' | {top:'200px', left:'200px'}]
	// $.preloader.stop();
	//
	// var e = $('<div/>').css('margin', '0 auto').insertAfter($('#conteiner')).preloader(); // Preloader center into a 'container'
	// e.preloader('stop');
});

1 個回答

2
dragonH
iT邦研究生 3 級 ‧ 2019-06-15 17:45:27
最佳解答

codepen

所以你的問題是什麼/images/emoticon/emoticon19.gif

我找不到你的 cors.js 跟 preloader.js

就先註解了


我大概看懂了

是想要查詢縣市嗎

這 api 我看不出來有縣市的查詢 params

就直接用 includes 去篩選了

1 .

先取得輸入的值

如果是搜尋縣市的話

可以考慮 dropdown

這樣可以避免 user 臺中 輸入成 台中

當然

你想要自己寫判斷也是可以

2 .

使用 includes

找出地址中含有搜尋的縣市資料

3 .

印出 table

看更多先前的回應...收起先前的回應...

最近開始學 所以不太了解/images/emoticon/emoticon16.gif

dragonH iT邦研究生 3 級 ‧ 2019-06-15 18:20:54 檢舉

可以貼一下你這 api 的說明文件之類的東西嗎

或許有提供縣市查詢的params也說不定

問一下 我要使用includes 要放在哪邊使用的

dragonH iT邦研究生 3 級 ‧ 2019-06-15 18:59:42 檢舉

我換一個寫法

你看會不會比較好

includes的使用方法

在檢查每個 location 那裏的迴圈

那兩個 js 我不知道是做啥用的

至少看起來我在這沒用到

很抱歉,我覺得是我沒有說清楚
cors.js 是利用政府公開平台
這樣去抓取我選的資料,讓他顯示在網頁中,但是這樣是全部都顯示。
所以我想利用 dropdown 選擇出我要的地點後 按了按鈕
會顯示出 我選擇的地點 而不是全部顯示

dragonH iT邦研究生 3 級 ‧ 2019-06-15 19:54:29 檢舉

那我的codepen

跟你預期的結果差在哪裡

你的回答 我看著思考 邊操作 而我卻有些地方不太了解
隨然 我還沒做完
但是我是希望從 cors.js抓取政府公開平台 可以透過我選擇的地點而顯示出我選擇的地點
這樣資料才不會太多而太亂
這樣是有辦法的嗎

dragonH iT邦研究生 3 級 ‧ 2019-06-15 20:16:14 檢舉

可以啊

codepen

加了你說的cors.js

輸入縣市名就能查詢

這樣是你要的嗎

原來如此 借我參考 學習一下 謝謝大大

dragonH iT邦研究生 3 級 ‧ 2019-06-15 20:22:57 檢舉

/images/emoticon/emoticon12.gif

順帶一提

那個你所謂的 cors.js 在這並不是必要的

原來如此 那順便問一下 如果我上面的活動名稱那些要顯示的話 要放在哪邊阿

dragonH iT邦研究生 3 級 ‧ 2019-06-15 20:32:49 檢舉

你說的是標題的話

寫在迴圈之前

codepen

喔 原來是在迴圈外面 從新處理就好了 謝謝 我在自己實驗看看用其他的

在問一下 如果我要收尋後,他是用日期排序出來的 這樣要從那邊修改阿

dragonH iT邦研究生 3 級 ‧ 2019-06-17 11:27:12 檢舉

aa5288aa123

如果你要排序的話

就要換個方式寫

因為現在的寫法是

迴圈跑一次

判斷地址是否包含查詢目標

符合就印出來一行

所以沒有什麼順序可言

要排序的話

就必須先整理好資料

才根據整理完的資料印出table

改法如下

codepen

主要在做排序的是這行

newData.sort((a, b) => a.time > b.time ? 1 : -1) // 排序

要時間由大到小顯示

就把 a.time > b.time 改成 a.time < b.time

我要發表回答

立即登入回答