各位好
我想在查詢後按了按鈕 可以把我查詢的資料給顯示出來
第二個是 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');
});
已邀請的邦友 {{ invite_list.length }}/5
呃
所以你的問題是什麼
我找不到你的 cors.js 跟 preloader.js
就先註解了
喔
我大概看懂了
是想要查詢縣市嗎
這 api 我看不出來有縣市的查詢 params
就直接用 includes 去篩選了
1 .
先取得輸入的值
如果是搜尋縣市的話
可以考慮 dropdown
這樣可以避免 user 臺中 輸入成 台中
當然
你想要自己寫判斷也是可以
2 .
使用 includes
找出地址中含有搜尋的縣市資料
3 .
印出 table
最近開始學 所以不太了解
可以貼一下你這 api 的說明文件之類的東西嗎
或許有提供縣市查詢的params也說不定
問一下 我要使用includes 要放在哪邊使用的
很抱歉，我覺得是我沒有說清楚
cors.js 是利用政府公開平台
這樣去抓取我選的資料，讓他顯示在網頁中，但是這樣是全部都顯示。
所以我想利用 dropdown 選擇出我要的地點後 按了按鈕
會顯示出 我選擇的地點 而不是全部顯示
那我的codepen
跟你預期的結果差在哪裡
你的回答 我看著思考 邊操作 而我卻有些地方不太了解
隨然 我還沒做完
但是我是希望從 cors.js抓取政府公開平台 可以透過我選擇的地點而顯示出我選擇的地點
這樣資料才不會太多而太亂
這樣是有辦法的嗎
原來如此 借我參考 學習一下 謝謝大大
順帶一提
那個你所謂的 cors.js 在這並不是必要的
原來如此 那順便問一下 如果我上面的活動名稱那些要顯示的話 要放在哪邊阿
iThome鐵人賽
看影片追技術