title: POST error 500 (Internal Server Error) - JSON syntax error
body: <p>I have an AngularJS 1.5 app with a form that posts data to a db. In the form there is a drop down select. The problem is, some options in the drop down POST successfully while others encounter a POST error saying </p>
  
  <pre><code>POST http://localhost/myURL 500 (Internal Server Error)
  </code></pre>
  
  <p>and beneath it...</p>
  
  <pre><code>SyntaxError: Unexpected end of JSON input
      at JSON.parse (&lt;anonymous&gt;)
      at Object.qc [as fromJson] (angular.js:1285)
      at apiError (postFormCtrl.js:957)
      at AjaxServices.js:37
      at angular.js:11029
      at angular.js:15616
      at m.$eval (angular.js:16884)
      at m.$digest (angular.js:16700)
      at m.$apply (angular.js:16992)
      at g (angular.js:11313)
  </code></pre>
  
  <p>What could be causing some items from the same form to POST successfully and others to encounter this error? I've double checked the code for missing commas, brackets etc... there's none.</p>
  
  <p>I've inspected the output on browsers, the response headers for successful posts have </p>
  
  <p><code>Content-Type:application/json</code>  in the response headers while failed POSTs have </p>
  
  <p><code>Content-Type:text/html</code> in the response headers. Could this be the issue?</p>
  
  <p>And if it is, how do I prevent it because I don't have a single setting in the application that sets the content-type as text/html.</p>
  
  <p>Additionally, I know the problem cannot be in the ajax post function because the entire application utilizes the same ajax post function and they work well.</p>
  
  <p><strong>MORE INFO</strong></p>
  
  <p>This is an example of an item in the drop down select:</p>
  
  <pre><code>                &lt;div class="row" ng-if="isStudentActivity"&gt;
                      &lt;div class="col-sm-10"&gt;
                          &lt;label for="activity"&gt;Select an activity:&lt;/label&gt;
                          &lt;div&gt;
                              &lt;ui-select ng-model="theactivity.selected" theme="select2" class="form-control" name="activity" required&gt;
                                &lt;ui-select-match placeholder="Select or search an activity..."&gt;
                                  &lt;span&gt;{{$select.selected.activity}}&lt;/span&gt;
                                &lt;/ui-select-match&gt;
                                &lt;ui-select-choices repeat="item in activities | filter: $select.search"&gt;
                                  &lt;span ng-bind-html="item.activity | highlight: $select.search"&gt;&lt;/span&gt;
                                &lt;/ui-select-choices&gt;
                              &lt;/ui-select&gt;
                              &lt;p ng-show="dataFilterForm.activity.$invalid &amp;&amp; (!dataFilterForm.activity.$pristine || dataFilterForm.$submitted)" class="help-block"&gt;&lt;i class="fa fa-exclamation-triangle"&gt;&lt;/i&gt; You must choose an activity.&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the ajax function used by all the POSTs in the application</p>
  
  <pre><code>       this.AjaxPost2 = function (data, route, successFunction, errorFunction, extras) 
         {
          $http({
              method: 'POST',
              url: route,
              headers: {'Content-Type': 'application/x-www-form-urlencoded'},
              data: data
          }).success(function (response, status, headers, config) {
              successFunction(response, status, extras);
          }).error(function (response) {
              errorFunction(response);
          });
  
      }
  </code></pre>
  
  <p>And the function is called using</p>
  
  <pre><code>this.addCommunication = function (request, successFunction, errorFunction, params) {
          ajaxService.AjaxPost2(request, path + "/addCommunication", successFunction, errorFunction, params);
      };
  </code></pre>