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

课程完整代码下载：02.zip

AQBox集成环境服务端解决方案

一套方案搞定Web网站/移动APP/物联网应用

AQBox+HTML5开发教程-第二课，提交表单