JavaScript是一種廣泛使用的編程語言,因其可以用于網頁開發而備受歡迎。在網頁開發中,JavaScript可以幫助我們實現各種功能,其中就包括火車票查詢。在本文中,我們將介紹一些JavaScript中關于火車票查詢的代碼。
首先,我們需要獲取用戶輸入的出發地和到達地以及日期等信息。這可以通過HTML頁面中的表單來實現。下面的代碼演示了如何獲取用戶輸入的值:
<form id="query-form">
<input type="text" name="departure" placeholder="出發地">
<input type="text" name="destination" placeholder="目的地">
<input type="date" name="date">
<button type="submit">查詢</button>
</form>
<script>
const form = document.getElementById("query-form");
form.addEventListener("submit", function(event){
event.preventDefault();
const departure = form.elements["departure"].value;
const destination = form.elements["destination"].value;
const date = form.elements["date"].value;
//TODO: 發起火車票查詢請求
});
</script>
在這個例子中,我們定義了一個表單,其中包含了出發地、目的地和日期等輸入框。我們用JavaScript獲取了表單元素,并在表單提交時獲取了用戶輸入的值。接下來,我們可以使用這些值來發起火車票查詢請求。
要發起火車票查詢請求,我們需要使用一個支持跨域請求的jQuery插件。下面是一個例子:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.4/jquery.xdomainrequest.min.js"></script>
<script>
const baseUrl = "https://api.12306.com/v1/trains";
const form = document.getElementById("query-form");
form.addEventListener("submit", function(event){
event.preventDefault();
const departure = form.elements["departure"].value;
const destination = form.elements["destination"].value;
const date = form.elements["date"].value;
const url =${baseUrl}?departure=${departure}&destination=${destination}&date=${date}
;
$.get(url, function(data){
//TODO: 處理火車票查詢結果
});
});
</script>
在這個例子中,我們通過jQuery的$.get方法發起了一個跨域請求。我們將用戶輸入的值拼接成了一個url,并將該url作為參數傳遞給$.get方法。在請求完成后,我們可以處理服務器返回的數據,根據用戶需求展示火車票查詢結果。
以上是兩個關于JavaScript中火車票查詢的例子。通過這些例子,我們可以看到,JavaScript可以輕松地實現火車票查詢功能。而這只是JavaScript在網頁開發中的一個小應用。隨著技術的不斷進步,我們相信JavaScript在未來將會發揮更重要的作用。