Просмотр источника: вместо исходного кода HTML отображается ответ JSON

Question

Итак, когда я просматриваю источник моей страницы, вместо html-страницы отображается ответ json (он же таблица, которую я получаю).

Сначала я пытался выяснить, как получить ответ json, в то же время отображая HTML, что заставило меня придумать этот код контроллера.Хотел бы помочь, как улучшить мой код для решения этой проблемы.Буду признателен за предложения!

Мой контроллер:

$products = Product::all();
    if (\Illuminate\Support\Facades\Request::ajax())
      return response()->json($products);
    else
      return view('products.index');

Jquery Script:

$(document).ready( function () {

var pathname = window.location.pathname;


  loadProducts();

function loadProducts(){
var columns = [{
        "sTitle": "Name",
        "mData": "name"
    }, {
        "sTitle": "Price",
        "mData": "price"
    }, {
        "sTitle": "Category_ID",
        "mData": "category_id"
    }, {
        "sTitle": "Supplier_ID",
        "mData": "supplier_id"
    }]

$.ajax({
    'url': '{{ url('products') }}',
    'method': "GET",
    'contentType': 'application/json'
}).done( function(data) {
      var example_table = $('#myTable').DataTable({
        "aaData": data,
        "columns": columns
      });
 });
 }

Answer 1

Я предлагаю вам использовать DataTable Источник данных JSONP для удаленных доменов

$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "scripts/jsonp.php",
            "dataType": "jsonp"
        }
    } );
} );