您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

Eclipse 導入無 .project 檔案的 jQuery Demo 專案完整步驟

編輯：程式設計綜合問答

問題根因

從菜鳥教程等網站下載的前端 Demo (HTML/CSS/JS/jQuery) 通常**不包含 Eclipse 專案元資料檔案** (`.project`、`.classpath`、`.settings/`)，因此無法直接透過 `Import > Existing Projects into Workspace` 導入。

解決方案：建立動態 Web 專案並複製靜態資源

步驟 1：建立新的 Dynamic Web Project

Eclipse 選單 `File > New > Dynamic Web Project`
Project name: `jQueryDemo` (自訂)
Target runtime: 選擇已設定的 Tomcat (如 Apache Tomcat 9.0)
Configuration: 保留預設或選 `Default Configuration for Apache Tomcat`
點擊 `Finish` (若提示開啟 Web 透視圖選 Yes)

步驟 2：複製下載的檔案到專案

在專案總管中展開 `jQueryDemo > WebContent` (或 `src/main/webapp` 若為 Maven 結構)，將下載解壓縮後的**所有檔案** (HTML、CSS、JS、圖片、lib 目錄等) **完整複製** 到此目錄下。

jQueryDemo/
└── WebContent/
    ├── index.html          <-- 你的入口頁面
    ├── css/
    │   └── style.css
    ├── js/
    │   ├── jquery-3.6.0.min.js
    │   └── demo.js
    └── images/
        └── logo.png

步驟 3：修正 HTML 中的資源引用路徑 (關鍵)

原始 Demo 可能使用相對路徑 `./js/jquery.js` 或絕對路徑 `/js/jquery.js`。在 Web 專案中，**請統一使用相對專案根目錄的路徑**，並在 `` 中加入 `` 標籤或使用 JSP EL 表達式動態產生：

<!-- 方式 1: 使用 base 標籤 (最簡單) -->
<head>
  <base href="<%=request.getContextPath()%>/">
  <script src="js/jquery-3.6.0.min.js"></script>
</head>

<!-- 方式 2: JSP 頁面使用 pageContext (推薦) -->
<script src="<%=request.getContextPath()%>/js/jquery-3.6.0.min.js"></script>

步驟 4：部署到 Tomcat 執行

右鍵專案 `Run As > Run on Server`
選擇 Tomcat 實例 > `Finish`
瀏覽器自動開啟 `https://localhost:8080/jQueryDemo/index.html`

進階：若 Demo 包含後端 API (Servlet/JSP)

將 `.java` 檔案放入 `src/` 目錄對應套件下
將 `.jsp` 檔案放入 `WebContent/` 或 `WebContent/WEB-INF/views/`
檢查 `web.xml` (若有) 是否需合併至專案的 `WEB-INF/web.xml`
若使用 Maven，執行 `Maven > Update Project` 同步依賴

常見問題排查

現象	原因與解決
404 Not Found	檢查 URL 中 context path 是否正確 (專案名稱)、檔案是否確實在 WebContent 下、Tomcat 是否已發布最新資源
jQuery 未載入 / $ is not defined	檢查 ` 上一篇文章： JSP 修改資料庫密碼完整流程：從表單提交到 UPDATE 參數化執行下一篇文章： Java 與異語言資料交互完整指南：Web Service、Socket、JNI、JACOB、共享儲存程式設計綜合問答 Eclipse 調試只能跟蹤到 .class 文件，無法定位源碼解決方案問題現象專案從他處拷貝，調試時斷點只能設置在 .class Struts2 表單提交 Action 映射問題：s:if 判斷無法動態切換 action 屬性問題分析 Struts2 中 <form action C 語言自製 PCAP 檔案寫入大量 TCP 封包時出錯的排查與解決問題現象開發者嘗試用 C 語言手動寫入 PCAP 檔案，單 C++ 幾何計算程序在 Win8/10 顯示異常：未初始化變量導致未定義行為代碼在 XP 下正常，升級至 Win8/10 後菜單顯示亂碼微信公眾平台開發：PHP 連接 MySQL 存儲用戶回復內容 Validform 實現數字驗證：僅在非數字輸入時提示 iOS NSDateFormatter 轉換含 AM/PM 字串：24小時制裝置相容性 Azure 搭建私有雲 vs 公有雲部署：概念釐清與操作指南 Visual Studio 專案檔案類型解析：.sln .vcxproj .filters 等作用與可刪性 C++ 調用 MySQL PASSWORD() 函數驗證用戶密碼：SQL 注入防範與參數化查詢 MATLAB 調用 C++ MEX 函數崩潰：內存洩漏與未釋放資源導致重複運行失敗欄目導航組合語言 Delphi Groovy WebSphere Rational Python 程式設計 Ruby 程式設計程式設計疑難解答程式設計綜合問答更多程式設計知識程式設計問題解答 Copyright © 程式碼之家 All Rights Reserved

現象

原因與解決

404 Not Found

檢查 URL 中 context path 是否正確 (專案名稱)、檔案是否確實在 WebContent 下、Tomcat 是否已發布最新資源

jQuery 未載入 / $ is not defined

檢查 `