get only property name and value from getGetFeatureInfoUrl WMS layer ol5

Stuck in a problem to get only property name and value of WMS layer.
here is my code

var point_wms = new ol.layer.Image({
  title: 'Gound Control Point',

    source: new ol.source.ImageWMS({

        url: 'http://localhost:8080/geoserver/wms',

        params: {
            'LAYERS': 'export:Ground_Control_Point',

            'VERSION': '1.1.1',
            'FORMAT': 'image/png',
                'tiled': true, 
                serverType: 'geoserver',
                crossOrigin: 'anonymous'
        }
    }),
     visible: true,
    opacity: 1
});

map.on('singleclick', getFeatureInformation);

function getFeatureInformation(evt){
        var coordinate = evt.coordinate;
        var lonLat = ol.proj.transform(coordinate,'EPSG:3857','EPSG:4326');
        var viewResolution = (map.getView().getResolution());

        if(point_wms.getVisible()){
            var url = point_wms.getSource().getGetFeatureInfoUrl(
              evt.coordinate, viewResolution, 'EPSG:3857',
              {'INFO_FORMAT': 'text/html'});
            console.log("url = "+url);
                if (url) {
                  content.innerHTML ='<iframe seamless src="' + url + '"></iframe>';
                }

                 overlay.setPosition(coordinate);

            }
}

it shows result like

but i want to get property name and value so that i can show this result using my html code in desired format like vertical table. how to achieve this?

i edited the question here is my code

 if(point_wms.getVisible()){
            var url = point_wms.getSource().getGetFeatureInfoUrl(
              evt.coordinate, viewResolution, 'EPSG:3857',
              {'INFO_FORMAT': 'application/json'});
                /*console.log("url = "+url);
                if (url) {
                  content.innerHTML ='<iframe seamless src="' + url + '"></iframe>';
                }*/
            if (url) {
                var parser = new ol.format.GeoJSON();
                console.log(parser)
                $.ajax({
                      url: url,
                      dataType: 'jsonp',
                      jsonpCallback: 'parseResponse'
                    }).then(function(response) {
                      var result = parser.readFeatures(response);
                       console.log("result.length = "+result.length);
                      if (result.length) {

                        var iso3 = [];
                        for (var i = 0, ii = result.length; i < ii; ++i) {
                          iso3.push(result[i].get('Point_Id'));
                        } 
                         content.innerHTML = iso3.join(',');
                         overlay.setPosition(coordinate);
                      }
                    });
              }


            }

still not getting value of point_id.

it is showing error like this

Uncaught SyntaxError: Unexpected token <
    at m (jquery.min.js:2)
    at Function.globalEval (jquery.min.js:2)
    at text script (jquery.min.js:2)
    at Ut (jquery.min.js:2)
    at k (jquery.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery.min.js:2)

<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE ServiceExceptionReport SYSTEM "http://localhost:8080/geoserver/schemas/wms/1.1.1/WMS_exception_1_1_1.dtd"> <ServiceExceptionReport version="1.1.1" >   <ServiceException code="ForbiddenFormat">
      Getting feature info using application/json is not allowed
</ServiceException></ServiceExceptionReport>