AQBox+HTML5開發教程-第二課，提交表單

在上節課我們講了怎樣用get的方式進行登陸，并獲取Token認證碼保存到cookie中。這節課我們接著來講下，登錄后怎樣進行提交表單？

這里我們來設計一個用戶咨詢表單，如下圖：

然后在服務端我們來創建一個對應的數據表：consult，分別建立：id、title、content、token等字段，用于接收用戶提交的表單內容，如下圖：

創建好數據表后，接著我們打開AQBox中間件，添加SQL腳本：

INSERT INTO consult
(title, content, token)
VALUES (:title, :content, :token);
SELECT LAST_INSERT_AUTOGEN() AS ID

如下圖：

總結下，其實就是簡單三步走：第一步，新建html表單；第二步，新建對應的數據表；第三步，添加SQL腳本。

接著，先打開瀏覽器測試下：

http://localhost:9081/v1/db/opensql?&token=942E838DD9EA41A9B4ED9E8E0051791E&data={"db_name":"AQBoxServer","sid":"INconsult","params":[{"name":"title","value":"咨詢標題"},{"name":"content","value":"咨詢下開發問題"},{"name":"token","value":"942E838DD9EA41A9B4ED9E8E0051791E"}]}

然后，打開數據表看下測試添加數據是否成功？

http://localhost:9081/v1/db/opensql?&token=942E838DD9EA41A9B4ED9E8E0051791E&data={"db_name":"AQBoxServer","sid":"getconsult"}

注意：操作時要先登陸獲取Token

查看數據表有寫入的數據，OK測試沒問題，我們就可以開始編寫前端提交代碼了。

前端代碼：

<!doctype html>
<html lang="zh-cn">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8">
<title>第二課 提交表單</title>
<style type="text/css">
#title,#content,#token{width:320px;}
input{margin-top:20px;padding:5px;}
textarea{width:325px;height:100px;}
#result{width:96%;margin-top:20px;background-color:#0CF;padding:5px;}
#result_json{width:96%;margin-top:20px;background-color:#1ED;padding:5px;word-wrap: break-word; word-break: normal;}
#post_result{width:96%;margin-top:20px;background-color:#0DE;padding:5px;}
</style>
<script type="text/javascript" src="html/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="html/jquery.cookie.js"></script>
<script type="text/javascript">
function getAjax() {
    $.ajax({
        url: "http://192.168.0.105:9081/v1/user/login?db_name=AQBoxServer&user_name="+$('#user').val()+"&password=e10adc3949ba59abbe56e057f20f883e",
        dataType: "json",
        success: function(data) { //請求成功后的回調函數，data為返回的數據
            $.cookie('token_id', data.token);
            $("#result").html("token值："+data.token);
            var json = JSON.stringify(data);
            $("#result_json").html("返回json代碼："+json);
        }
    });
}
function rtoken() {
	$("#token").attr("value", $.cookie('token_id'));
}
function submitConsult(){
        var a1 = $('#title').val();
		var a2 = $('#content').val();
		var a3 = $('#token').val();
		var List={
		  "db_name": "AQBoxServer",
		  "sid": "INconsult",
		  "params":[{"name":"title","value":a1},{"name":"content","value":a2},{"name":"token","value":a3}]
		}
		eval("var jsonStr = '"+encodeURI(JSON.stringify(List),"utf-8")+"';"); 
		$.ajax({
                url: "http://192.168.0.105:9081/v1/db/opensql?&token="+a3+"&data="+jsonStr,
				type: "POST",
                async: false,
                contentType : 'application/json;charset=utf-8',
				dataType:"json",
                success: function (data) {
				    var datajson = JSON.stringify(data);
					$("#post_result").html(datajson);
                }
            });
    }
function getConsult(){
		var List={
		  "db_name": "AQBoxServer",
		  "sid": "getconsult",
		}
		$.ajax({
                url: "http://192.168.0.105:9081/v1/db/opensql?&token="+$.cookie('token_id')+"&data="+JSON.stringify(List),
				dataType:"json",
				cache:false,
                success: function (data) {
				    var datajson = JSON.stringify(data);
					$("#post_result").html(datajson);
                }
            });
    }
</script>
</head>
<body>
<!-- 登錄獲取Token -->
<div id="login">
<h3>第一課，登陸獲取token</h3>
<p>
<label for="user">帳號：</label>
<input type="text" name="user" id="user" value="admin" />
</p>
<p>
<label for="pass">密碼：</label>
<input type="text" name="pass" id="pass" value="123456" />
</p>
<input type="button" value="1.用戶登陸" onclick="getAjax()" />
<div id="result">顯示返回token認證碼</div>
<div id="result_json">顯示返回的json代碼</div>
</div>
<!-- 提交表單 -->
<div id="consult" style="border-top:1px solid #333;margin-top:15px;">
<h3>第二課，提交咨詢表單</h3>
<p>
<label for="title">咨詢標題：</label>
<input type="text" name="title" id="title" value="這個產品怎么使用？" />
</p>
<p>
<label for="content">咨詢內容：</label>
<input name="content" id="content" />測試下提交表單</input>
</p>
<input type="button" value="讀取Token" onclick="rtoken()" />
<p>
<label for="token">用戶Token：</label>
<input type="text" name="token" id="token" value="" />
</p>
<input type="button" value="2.提交表單" onclick="submitConsult()" />
</div>
<input type="button" value="3.查詢結果" onclick="getConsult()" />
<div id="post_result">這里顯示提交結果</div>
<br /><br /><br />

<a href="http://www.getmoorerealty.com/">日韩黄色网站在线观看</a>
<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
</body>
</html>

課程完整代碼下載：02.zip

AQBox集成環境服務端解決方案

一套方案搞定Web網站/移動APP/物聯網應用

AQBox+HTML5開發教程-第二課，提交表單