jQueryでAjaxを使う
コード
helloajax.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Ajax</title>
<script src="jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function sendText() {
var params = {
"key1" : "value1",
"key2" : "value2"
};
$.ajax({
type : "post",
url : "/hello/hellojson.json",
data : JSON.stringify(params),
contentType : 'application/json',
dataType : "json",
success : function(result, dataType) {
console.log("OK1");
console.log(result);
console.log(result.msg);
},
complete : function(json_data) {
console.log("OK2");
}
});
}
</script>
</head>
<body>
<div>
<input type="button" name="btnSend" style="font-size: 16px;"
value="送信" onclick="sendText()">
</div>
</body>
</html>
hellojson.json
{"msg":"Hello"}
実行結果
ブラウザのF12コンソール
OK1
Object {msg: "Hello"}
Hello
OK2