CakePHP 3 - AJAX保存問題和未捕獲SyntaxError：意外的標識符

Question

我有一個表格中保存數據在表（食品）中的模式。該表具有以下字段：

• ID
• 類別
• 類型

當網頁加載完畢後，我馬上得到一個Uncaught SyntaxError: Unexpected identifier (managefood:393);我在下面的代碼中提到了這一點。

打開模式並填寫字段工作正常。然而，保存失敗，刷新頁面並檢查MySQL後，沒有新的數據輸入。我不確定如何檢查我的AJAX POST失敗的位置（例如，如果有一個表單輸入被破壞，並且由於這些字段是必需的，那麼這將解釋爲不能保存）。

我重新爲我的模型烘烤了我的模型，以檢查模型中是否存在問題，但沒有解決問題。

下面是包含打開模式的按鈕和腳本，模式本身帶有表單輸入以及保存數據的腳本的代碼。

$(document).ready(function() { 
 
    $("#newsavebutton").click(function() { 
 
    $.post("<?= $host . $basepath ?>/food/add.json", { 
 
     category: $('#category').val(), 
 
     type: $('#type').val() //line 393 
 
    };); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<button onclick="newFood()" class="btn btn-primary btn-xl page-scroll wow tada">New Food</button> 
 

 
<script> 
 
    function newFood() { 
 
    $('#newfoodModal').modal('show'); 
 
    } 
 
</script> 
 

 
<div class="modal fade" id="newfoodModal" tabindex="-1" role="dialog" aria-labelledby="newfoodLabel" aria-hidden="true"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 
    
 
        <span aria-hidden="true">&times;</span> 
 
        </button> 
 
     <h3 class="modal-title" id="newfoodLabel">New Food</h3> 
 
     <br> 
 
     <div> 
 
      <div class="col-sm-12"> 
 
      <label for="category" id="newCategoryLabel" style="text-align: left">Category</label> 
 
      <select name="category" id="newCategory" onchange="newchangeCategory()" class="form-control"> 
 
           <option value="" disabled selected hidden>Select a category</option> 
 
           <option value="Fruit">Fruit</option> 
 
           <option value="Vegetable">Vegetable</option> 
 
          </select> 
 
      </div> 
 
      <div class="col-sm-12"> 
 
      <label for="type" id="newTypeLabel" style="text-align: left">Type</label> 
 
      <select name="type" id="newType" class="form-control"></select> 
 
      </div> 
 

 
      //this script enables for the second select to change based on the first - if Fruit is chosen as the category for example, only fruit options are shown in the Type select. 
 
      <script type="text/javascript"> 
 
      var typeOptions = {}; 
 
      typeOptions['Fruit'] = [ 
 
       'Apple', 
 
       'Pear', 
 
       'Banana', 
 
       'Plum', 
 
       'Peach' 
 
      ]; 
 
      typeOptions['Vegetable'] = [ 
 
       'Broccoli', 
 
       'Carrot', 
 
       'Pumpkin' 
 
      ]; 
 

 
      function newchangeCategory() { 
 
       var categoryChoice = document.getElementById('newCategory'); 
 
       var typeChoice = document.getElementById('newType'); 
 
       var selectedCategoryChoice = categoryChoice.options[categoryChoice.selectedIndex].value; //line 340 
 
       console.log(selectedCategoryChoice); 
 
       while (typeChoice.options.length) { 
 
       typeChoice.remove(0); 
 
       } 
 
       var typesAvailable = typeOptions[selectedCategoryChoice]; 
 
       if (typesAvailable) { 
 
       var i; 
 
       for (i = 0; i < typesAvailable.length; i++) { 
 
        var type = new Option(typesAvailable[i], typesAvailable[i]); 
 
        typeChoice.options.add(type); 
 
       } 
 
       } 
 
      }; 
 
      </script> 
 
     </div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close 
 
        </button> 
 
     <button id="newsavebutton" type="button" class="btn btn-primary" data-dismiss="modal">Save changes 
 
        </button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

下面也是在控制器中添加函數的代碼：

public function add() 
    { 
     $food = $this->Food->newEntity(); 
     if ($this->request->is('post')) { 
      $food = $this->Food->patchEntity($food, $this->request->data); 
      if ($this->Food->save($food)) { 
       $this->Flash->success(__('The food has been saved.')); 

       return $this->redirect(['action' => 'index']); 
      } else { 
       $this->Flash->error(__('The food could not be saved. Please, try again.')); 
      } 
     } 
     $this->set(compact('food')); 
     $this->set('_serialize', ['food']); 
    } 

Answer 1

據我看到這是一個語法錯誤。 您的代碼如下：

$.post("<?= $host . $basepath ?>/food/add.json", { 
    category: $('#category').val() 
    type: $('#type').val() //line 393 
};); 

嘗試添加昏迷,線392之後，type:財產申報之前。像這樣：

$.post("<?= $host . $basepath ?>/food/add.json", { 
    category: $('#category').val(), //<-- here 
    type: $('#type').val() //line 393 
};); 

關於錯誤處理的問題：根據jQuery documentation您塔卡納使用.done()，.fail()和.always()方法看到POST請求本身是否失敗或成功。例如：

$.post("<?= $host . $basepath ?>/food/add.json", { 
    category: $('#category').val(), //<-- here 
    type: $('#type').val() //line 393 
}) 
.done(function(data) { 
    console.log(data); 
    alert("success"); 
    }) 
.fail(function(error) { 
    console.log(error); 
    alert("error"); 
}); 

通過這種方式，您可以查看POST返回的內容以及erorr的內容（如果有）。