顯示具有 Jsp 標籤的文章。 顯示所有文章
顯示具有 Jsp 標籤的文章。 顯示所有文章

2017年2月18日 星期六

JQuery-遇到的問題彙整

身分證
http://liaosankai.pixnet.net/blog/post/24165900-%E8%BA%AB%E4%BB%BD%E8%AD%89%E9%A9%97%E8%AD%89%E7%A8%8B%E5%BC%8F-for-javascript-(%E7%B2%BE%E7%B0%A1%E7%89%88)

checkbox radio 參數 (name : Jaskaran singh Rajal)
http://stackoverflow.com/questions/2834350/get-checkbox-value-in-jquery

Two listBox
http://esausilva.com/2016/01/29/move-items-between-two-listbox-using-jquery-html-select-tag/

日期元件
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_input_date_value2
日期檢查
http://www.jquerybyexample.net/2011/10/validate-date-format-using-jquery.html

2017年1月14日 星期六

JAVA-JSP 頁面資料利用 Ajax 傳送至 Controller

How send data to controller by ajax ?
如果在做網頁開發時
我們一定聽過 Ajax 這好用的工具
更是前後端保持暢通的橋樑

但是我們要如何將資料整理後並將資料傳送至 Controller

首先 , 使用的方法有 :
1 . 傳統字串資料傳送
2 . JSON

一 . 傳統字串資料傳送

先在 Jsp 內匯入 JQuery 套件
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

並且在 Ajax 的 data 放置參數
格式為 :
"key1=value1&key2=value2......"
中間分隔用 & 串接

$.ajax({
    type : "post",
    url : "http://localhost:8080/MyProject/query",
    data: "id=1969&name=John", // 資料是用 & 做串接
    success : function(response) {
        alert('Success');
    },
    error : function() {
        alert('fail');
    }
});

最後在 HelloController.java 接收從 Jsp 傳來的參數
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class HelloController {

    @RequestMapping(value = "/query") // 對應的連結
    @ResponseBody // 有回應
    public String query(@RequestParam(value="id") Integer id, 
                        @RequestParam(value="name") String name) {
        // 上方欄位說明
        // RequestParam 代表回應的參數
        // value 代表對應的 Key
        // 最後宣告參數型別

        System.out.println("query");
        System.out.println("" + id);  
        System.out.println("" + name);  
        return "searchUser";
    }
    
}

結果如下 :

query
1969
John


參考資料:Spring mvc系列六之 ajax运用(基于json格式)
參考資料:SpringMVC注解@RequestParam全面解析
參考資料:jQuery send string as POST parameters
參考資料:Ajax传值与接收值
歡迎轉載 , 請註明出處 . 

2017年1月2日 星期一

JSP-JSTL 與 JSP 與 Servlet 結合

JDBC 其實有一點像是 EL

首先下載 JSTL.jar 放在 Project/WebContent/WEB-INF/lib 底下

接下來在新增一個繼承 HttpServlet 的 Class
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/HelloEveryone")
public class HelloEveryone extends HttpServlet {

    private static final long serialVersionUID = 1L;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 字串
        String strData = "這是字串資料第一筆";
        // List
        List<String> listData = new ArrayList<String>();
        listData.add("這是List第一筆數");
        listData.add("這是List第二筆數");
        listData.add("這是List第三筆數");
        // Map
        Map<String, String> mapData = new HashMap<String, String>();
        mapData.put("First", "這是Map第一筆");
        mapData.put("Second", "這是Map第二筆");

        request.setAttribute("Date_1", strData);
        request.setAttribute("Date_2", listData);
        request.setAttribute("Date_3", mapData);

        String uri = "/jsp/HelloEveryone.jsp";
        RequestDispatcher dispatcher = request.getRequestDispatcher(uri);
        dispatcher.forward(request, response);

    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse respone)
            throws ServletException, IOException {
        super.doPost(request, respone);
    }

}

在使用 JSTL 時候
一定要先宣告標籤
不然一定會出現錯誤訊息
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!-- 字串資料 -->
    <c:out value="${requestScope.Date_1}"></c:out>
    <br>
    <br>
    <!-- List 資料 items是對應的資料來源,var是來源內的參數 -->
    <c:forEach items="${requestScope.Date_2}" var="listData_2">
        <c:out value="${listData_2}"></c:out><br>
    </c:forEach>
    <br>
    <br>
    <!-- Map 資料 -->
    <c:forEach items="${requestScope.Date_3}" var="mapData_3">
        <c:out value="${mapData_3.key}"></c:out> : <c:out value="${mapData_3.value}"></c:out><br>
    </c:forEach>
</body>
</html>


參考資料 :jsp与html的区别
參考資料 :Attribute
歡迎轉載,請註明出處.

2016年7月4日 星期一

JSP、Servlet-JSP 與 Servlet 結合

為什麼我們不用 Html 就好
則要用 Jsp ??
最主要是我們直接用簡短的程式來完成一大段的功能
有點像是把資料傳給 Jsp 之後收到參數
再把整個頁面轉成 Html 格式

Servlet 3.0 新增使用註解的方式設定
省掉要在 Web.xml 設定的動作
我們直接來說明和操作吧 !


























1 . Index.java
import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

// 網址
@WebServlet("/index")
public class Index extends HttpServlet{

    private static final long serialVersionUID = 1L;

    public void doGet(HttpServletRequest request
            , HttpServletResponse response)
            throws IOException, ServletException {
        
        // 內容    
        RequestDispatcher dispatcher = getServletContext()
                .getRequestDispatcher("/WEB-INF/jsp/index.jsp");
        dispatcher.forward(request, response);
        
    }
 
    public void doPost(HttpServletRequest request
            , HttpServletResponse response)
            throws IOException {
 
    }
    
}

2 . index.jsp
<%@ page language="java" contentType="text/html; charset=BIG5"
    pageEncoding="BIG5"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>Insert title here</title>
</head>
<body>
    Hello World !!!
</body>
</html>


參考資料 : How to redirect to JSP inside WEB-INF folder
參考資料 : Java EE 6 - Servlet 3.0 新功能 - 注解 (Annotations)
參考資料 : 網頁套版

2014年6月25日 星期三

Jsp-1-Eclipse和Tomcat安裝

  1. 安裝JDK到專屬路徑
  2. 安裝Eclipse到專屬路徑
  3. 在Eclipse下點選工具列Help->Install New Software->新增 : 
    Name : Indigo
    Location : http://download.eclipse.org/releases/indigo勾選 Pending 後要等約1-2分鐘
  4. 勾選Web, XML, Java EE and OSGi Enterprise Develepment(最下面)
  5. 執行接下來的安裝,並且重新執行Eclipse
  6. 新增環境變數 : 
    JAVA_HOME
    安裝jdk之路徑( C:\JAVA\eclipse\jdk7 )
  7. 新增環境變數 : 
    CLASSPATH
    .;%JAVA_HOME%\lib
  8. 執行 -> cmd -> javac -version 和 java -version
    確認Java有安裝和環境設定有成功
  9. 新增環境變數 :
    CATALINA_HOME
    擺放Tomcat之路徑( C:\JAVA\eclipse\apache-tomcat-6.0.39 )
  10. Path內新增環境變數( 最好先把舊的環境複製一份到筆記本 )
    最前 :
    C:\JAVA\eclipse\apache-tomcat-6.0.39\bin;
    最後 :
    ;%JAVA_HOME%\bin
  11. 執行 -> cmd -> startup( 會執行Tomcat設定 )
    在Tomcat視窗內有看到[ "http -apr-8080" ]   it's success
  12. 在網頁的網址列輸入 : 127.0.0.1:8080  會有Tomcat網站,代表確認成功。

http://youthhng.pixnet.net/blog/post/35658541-%5Bjsp%5D-jsp%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D---eclipse-%2B-tomcat