AJAX 是與服務器交換數據的藝術，它在不重載全部頁面的情況下，實現了對部分網頁的更新。
一、表單形式ajax提交
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>login test</title>
<link href="/static/css/style.css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="ajax方式">
<script src="/static/js/jquery-1.11.2.min.js"></script>
<script src="/static/js/cytoscape.min.js"></script>
<script src="/static/js/cytoscape-qtip.js"></script>
<script type="text/javascript">
function login() {
$.ajax({
//幾個參數需要注意一下
type: "POST",//方法類型
dataType: "json",//預期服務器返回的數據類型
url: "/graph" ,//url，服務器網址
data: $('#form1').serialize(),//表單中需要要後臺服務器提交的內容
success: function (result) {//前端對於服務器返回數據的操作函數
console.log(result);
alert（‘成功’）,
error : function() {
alert("異常！");
}
});
}
</script>
</head>
<body>
<div id="form-div"> //form表單實現方式
<form id="form1" onsubmit="return false" action="##" method="post">
<p>用戶名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
<p>密 碼：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
<p><input type="button" value="登錄" onclick="login()"> <input type="reset" value="重置"></p>
</form>
</div>
</body>
</html>
二、非表單post函數形式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>login test</title>
<link href="/static/css/style.css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="ajax方式">
<script src="/static/js/jquery-1.11.2.min.js"></script>
<script src="/static/js/cytoscape.min.js"></script>
<script src="/static/js/cytoscape-qtip.js"></script>
<script type="text/javascript">//幾個參數需要注意一下
$("#button").click(function(){
$.post('/graph', //post方法，向/graph網址提交數據
{'query_sentence': $('#query_sentence').val()}, //通過id爲query_sentence的變量向服務器提交數據
function(result) { //前端對於服務器返回數據的操作函數
console.log(result);
alert（‘成功’）;
}
);
}
</script>
</head>
<body>
<div id="input-div"> //非form表單實現方式
<textarea name="query_sentence" id='query_sentence' placeholder="請輸入查詢語句"></textarea>
<button class="btn_search" id="button">Search</button>
</div>
</body>
</html>
三、非表單ajax函數提交
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>login test</title>
<link href="/static/css/style.css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="ajax方式">
<script src="/static/js/jquery-1.11.2.min.js"></script>
<script src="/static/js/cytoscape.min.js"></script>
<script src="/static/js/cytoscape-qtip.js"></script>
<script type="text/javascript">//幾個參數需要注意一下
$('#button').click(function () {
$.ajax({
type: "post",//post方法，
url: '/graph',//向/graph網址提交數據
data: {'query_sentence': $('#query_sentence').val()},//通過id爲query_sentence的變量向服務器提交數據
dataType: 'json',
success:
function(result) { //前端對於服務器返回數據的操作函數
console.log(result);
alert（‘成功’）;
}
);
}
</script>
</head>
<body>
<div id="input-div"> //非form表單實現方式
<textarea name="query_sentence" id='query_sentence' placeholder="請輸入查詢語句"></textarea>
<button class="btn_search" id="button">Search</button>
</div>
</body>
</html>