研究前段的html代码与js代码的链接关系

通过学长写的获取需求名称和需求描述的页面来进行学习：

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大概是这次操作完成的标志。

下面尝试用前端向数据库里写数据。