研究前段的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大概是這次操作完成的標誌。

下面嘗試用前端向數據庫裏寫數據。