slim3 jquery form submit ajax

slim3だと、PHPと同じぐらいの簡単さでレスポンスのコードが書けた。(テスト程度なら)

それに、htmlとサーバーサイドのコードが同じ場所にあって、テストがしやすい!

送信側:Ajax.html

	<html lang="ja">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
	<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
	<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
	</head>
	<body>  
		<form>
		<input type="text" name=text>
	 		<button type="button" id="send" class="btn">Submit</button>
		</form>
		<div id="result"></div>	
	<script type="text/javascript">
	$(
		function(){
			$('#send').click(
					function(){
						//window.alert("xxxxxxxxxxx");
						$.post('Ajax', 
								$('form').serializeArray(),
								function(data){$('#result').html(data); }
						);
					}
			);		
		}		
	);
	</script>
	</body>
	</html>

受信側:AjaxController?.java

	public class AjaxController extends Controller {
	    @Override
	    public Navigation run() throws Exception {
		String asString = asString("text");
		response.setCharacterEncoding("utf-8");     
		response.setContentType("text/plain");
		response.getWriter().println("Ajax test text=");
		response.getWriter().println(asString);
		return null;
	    }
	}

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2013-03-12 (火) 23:01:43 (2236d)