通过学长写的获取需求名称和需求描述的页面来进行学习:
html页面如下:
注意在很多处用到的for属性的作用:
for 属性规定 label 与哪个表单元素绑定。标记通常以下面两种方式中的一种来和表单控件相联系:将表单控件作为标记标签的内容,这样的就是隐式形式,或者为 <label> 标签下的 for 属性命名一个目标表单 id,这样就是显式形式。
学长在多处用到的是显式的标签。
js代码如下:
下面,点击new-request-btn打开新建需求的tab。
$requestBtn.on('click',function(event) {
var $newRequestBtn=$("#new-request-btn");
var $requestConfirmBtn=$("#request-confirm-btn");
var $siteResourceBtn=$("#site-resource-btn");
$newRequestBtn.off('click');
$newRequestBtn.on('click',function(){
$("#request-name").val("");
$("#request-desc").val("");
var validator=$("#request-form").validate({
submitHandler:function(){
var requestName=$("#request-name").val().trim();
var requestDesc=$("#request-desc").val().trim();
if(requestName==""){
alert("输入不能为空");
}
$.ajax({
url: baseURL+'/api/datacrawling/request/new',
type: 'POST',
dataType: 'json',
data: {
requestName: requestName,
requestDesc:requestDesc
}
})
.done(function(data) {
console.log("success");
if(data['errno']!=0){
alert("服务器错误");
}else{
alert("新建成功");
$requestConfirmBtn.click();
}
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});
}
});
validator.resetForm();
});
注意上图中参数的含义:右边的request-name和request-desc是从textarea获取到的输入的值;
左边的代表了参数名。
data用来获取Post请求返回到的JSON数据。
哈哈,现在知道key值“error”的作用了吧!
至于fail应该是没有拿到返回值的情况。在后面的always大概是这次操作完成的标志。
下面尝试用前端向数据库里写数据。