title: Uncaught SyntaxError: Unexpected token : jQuery ajax
body: <p>I am creating a web page that call remote data(json). for that i used jQuery.ajax it is good when i am calling the page in same domain. But if I call this from another domain (like: localhost) browser is blocking by saying</p>
  
  <blockquote>
    <p>No 'Access-Control-Allow-Origin' header is present on the requested resource</p>
  </blockquote>
  
  <p>but If I use <code>dataType: 'JSONP'</code> with ajax then browser is not blocking but getting this <strong>following error</strong> though it is a valid json object:</p>
  
  <pre><code>Uncaught SyntaxError: Unexpected token :
  at p (jquery.min.js:2)
  at Function.globalEval (jquery.min.js:2)
  at text script (jquery.min.js:4)
  at Nb (jquery.min.js:4)
  at A (jquery.min.js:4)
  at XMLHttpRequest.&lt;anonymous&gt; (jquery.min.js:4)
  </code></pre>
  
  <p><strong>This is my ajax code:</strong></p>
  
  <pre><code>$(function () {
      $.ajax({
          url: "/GarmentTech/api/get_products.php",
          type: "GET",
          success: function (result) {
              $('.text').text('');
              console.log(result);
              console.log(result);
              for (var i = 0; i &lt; result.products.length; i++) {
                  var place = `
                      &lt;tr&gt;
                          &lt;td&gt;${result.products[i].name}&lt;/td&gt;
                          &lt;td&gt;${result.products[i].description}&lt;/td&gt;
                          &lt;!--&lt;td&gt;${result.products[i].type}&lt;/td&gt;--&gt;
                          &lt;td&gt;${result.products[i].model_color}&lt;/td&gt;
                          &lt;td&gt;${result.products[i].size}&lt;/td&gt;
                          &lt;!--&lt;td&gt;${result.products[i].manufacturer}&lt;/td&gt;--&gt;
                          &lt;td&gt;${result.products[i].purchase_rate}&lt;/td&gt;
                          &lt;td&gt;${result.products[i].sales_rate}&lt;/td&gt;
                          &lt;td style="text-align:right;"&gt;
                              ${result.products[i].stock_count}
                              ${result.products[i].unit_type}
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  `;
                  $('.product_view').append(place);
              }
          },
          dataType: 'JSONP' // &lt;----
      }); 
  });
  </code></pre>
  
  <p><strong>And json is like this:</strong></p>
  
  <pre><code>{
  "status": "ok", //&lt;---- (chrome is saying problem is hare)
  "count": 26,
  "count_total": 26,
  "pages": 1,
  "products": [
      {
          "size": "16X18",
          "id": 41,
          "name": 86416,
          "cost_price": 1200,
          "sales_rate": 1300,
          "description": "",
          "remarks": "",
          "batch_no": "NA"
      }, {}...
  </code></pre>