2016年12月18日 星期日

AngularJS中使用$http的POST不要傳送JSON格式給JSP, Servlet的方法

AngularJS 在用$http的angularjs service傳POST時,參數預設會用JSON的格式傳至url指定的後台,例如如果用以下的傳送方式:
$http({
   method: 'POST',
   url: 'xxx.do',
   data: {param1: "param1", param2: "param2"}
  })

後台例如Servlet會得到一串JSON格式的文字,像是 {'param1':'param1, 'param2' : 'param2},
但通常這並不是我們想要的key-value的型式,如果想要傳遞key-value型式的話,必須要用到
$httpParamSerializer這個angularjs service,並且設定header (不設定的話預設的Content-Type是application/json;charset=utf-8),使用方法如下:

$http({
   method: 'POST',
   url: 'xxx.do',
   data: $httpParamSerializer({param1: "param1", param2: "param2"}),
   headers: {
       'Content-Type': 'application/x-www-form-urlencoded'
   }
  })


這樣AngularJS就會以param1=param1&param2=param2的方式傳至後台了。

2016年12月12日 星期一

JQuery Ajax傳遞陣列時參數名不要帶中括弧的方法

JQuery的Ajax如果使用POST的話,似乎在1.4+版本後都會把陣列的參數名加上中括弧,例如以下:
$.ajax({
 method: "POST",
 url: "/xxx.do",
 data: {
    arrayParameter : ['1','2','3','4','5']         
 }
});

預設arrayParameter會以arrayParameter[]的參數名,值為1,2,3,4,5的方式傳進url指定的後台,例如果用Servlet去接的話就要用
String[] arrayParameter = request.getParameterValues("arrayParameter[]");
才能接到。
為了能夠讓JQuery傳的陣列參數不要帶上中括弧,必須指定ajax的traditional為true,例如:

$.ajax({
 traditional: true,
 method: "POST",
 url: "/xxx.do",
 data: {
    arrayParameter : ['1','2','3','4','5']         
 }
});

或是設定全局設定,讓每個ajax都能使用traditional的參數傳遞方式:
$.ajaxSetup({traditional: true});

參考資料:

  1. How do I remove the square brackets at the end of a JS variable name during AJAX calls?

2016年12月11日 星期日

Angular2簡易安裝使用 - Eclipse + Typescript plugin + System.js

Angular2的配置比起它的前一代AngularJs來說,稍微麻煩一點,因為涉及了typescript和module的使用。

在這裡我要介紹在Eclipse的開發環境中,以一個簡單的Angular2範列來說明如何簡單的在Eclipse中設置Angular2的初始設置。Typescript使用了Eclipse的typescript外掛、module使用了System.js。


需準備的步驟如下:

  1. node.js因為等下會使用到npm (Angular CLI),並且Eclipse的Typescript也需要用到node.js的功能,所以我們要先安裝node.js。
    node.js官網
  2. git for windows
    因為Angular CLI會需要用到git,所以需安裝windows版本的git。
    windows版本下載
  3. Angular CLI (選用)
    一個對於建置Angular2專案非常方便的工具,不過這裡為了要學習自己建置,所以只利用了Angular CLI來取得Angular2所需的modules,取得modules不一定要用Angular CLI,所以為選用。
    Angular CLI官方網站
  4. system.js
    這裡我們使用了system.js來使用javascript module,但也可選擇其他的module工具,例如webpack

取得Angular2所需的modules
我們可以利用node.js的npm來安裝Angular2所需的modules (會放到node_modules資料夾中),
但這裡我們也可以利用Angular CLI來簡單取得modules,
安裝好Angular CLI後,可以在命令列視窗中使用
ng new XXX
來在當下資料夾中建立Angular專案,在建立好的專案資料中,可以
找到Angular2所需的modules已經都下載後放在node_modules資料夾中

Eclipse (這裡安裝的是neon版本) + Typescript plugin
Help --> Install New Software...
--> 加入一個連結 : http://eclipse-update.palantir.com/eclipse-typescript/
下載安裝Eclipse的Typescript plugin

建立我們的專案
以下是我們的檔案結構圖

其中紅色框裡的是我們會建立的,藍框則是Typescript plugin幫我們編譯產生的。
在這裡Typescript plugin不是也不需使用如tsconfig.json的設定檔,而是直接在Eclpse裡設定,
對著專案按右鍵,選擇 Properties --> Typescript 可以看到如下畫面,其中
Source folder(s): ts檔放置的位置
Exported folder(s): 在 import module時,預設的路徑位置,例如node_modules之下的import路徑不用再打node_modules,預設會先重這裡找
Output folder: ts編譯成的js檔要放置的位置
接著設定 Compiler,這邊可以位照下面的設定就好,紅色框是比較重要的設定
再來就可以開始製作Angular2的範例了。

/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>

<script src="node_modules/core-js/client/shim.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="app/js/system.js"></script>
<script>
 System.config({
  defaultJSExtensions: true,
  paths: {
   'app/*': './app/*',
   '@angular/*': './node_modules/@angular/*',
   'rxjs/*': './node_modules/rxjs/*'
  },
  packageConfigPaths: ['./node_modules/@angular/*/package.json']
 });
 SystemJS.import('app/js/index.js');
</script>
</head>
<body>
 <my-app>Loading...</my-app>
</body>
</html>
其中Angular所需的shim.js、Reflect.js、zone.js雖然有被放在node_modules中,但因為它們並沒有寫成modules的型式,所以要直接用<script>來載入。
在這邊我們使用了system.js來載入module,System.config()設置了module的載入設定,以下說明:
defaultJSExtension: 如果為ture,則import module時可以不用寫副檔名,預設為js
paths:規定了module查找路徑,需注意的是在這裡除了使用了@angular之下的module,還有rxjs之下的module。
packageConfigPaths:預設先去尋找指定路徑資料夾內的package.json設定檔,如果找到了main屬性,以main指定的js檔案為要import的module

設定完後,用SytemJS.import()來載入此頁要用的,一開始的js程式。

/ts/index.ts:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

/ts/app.module.ts:
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

/ts/app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>My First Angular2!!! App</h1>'
})
export class AppComponent { }


最後啟動Server,瀏覽index.jsp,應該就可以看到頁面一開始有Loading...字樣,然後很快變成My First Angular2!!! App的字的效果了
原始碼下載: