[Solved] ASP.Net AJAX Error: Unexpected non-whitespace character after JSON

Amitabha says:

var parsdata = JSON.parse(objdata);

Here you are getting the error.

Refer the updated code.

function callState() {
    if (document.getElementById('drpState').value == '') {
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "https://SearchState.co.in/State.ashx", true);
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                var data = this.responseText;

                var obj = JSON.parse(data);
                $('#divResult').html(obj.statuscode);
                ///DROP DOWN ///
                $('#drpState').empty().append('<option selected="selected" value="0">Please select</option>');
                $.each(obj.data, function () {
                    $('#drpState').append($("<option></option>").val(this['StateCode']).html(this['StateName']));
                });
            }
            else {
                $('#divResult').empty();
                var table = '';
                table += '<table style="border-collapse: collapse" width="100%" cellpadding="0" bordercolor="#E6E6E6" border="1"><tbody>'
                table += '<tr><td style="padding:5px;"><b>Status</b></td><td style="padding:5px;">' + this.responseText + '</td></tr>';
                table += '</tbody></table></br>';
            }
            $('#divResult').html(table);
        };
        xhttp.send();
    }
}

Hi Amitabha,

Please refer below sample.

HTML

Default.aspx

<div id="divResult"></div>
<hr />
<select id="drpState"></select>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        callState();
    });
    function callState() {
        if (document.getElementById('drpState').value == '') {
            var xhttp = new XMLHttpRequest();
            xhttp.open("GET", "Handler.ashx", true);
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    var data = this.responseText;

                    var obj = JSON.parse(data);
                    $('#divResult').html(obj.statuscode);
                    ///DROP DOWN ///
                    $('#drpState').empty().append('<option selected="selected" value="0">Please select</option>');
                    $.each(obj.data, function () {
                        $('#drpState').append($("<option></option>").val(this['StateCode']).html(this['StateName']));
                    });
                }
                else {
                    $('#divResult').empty();
                    var table = '';
                    table += '<table style="border-collapse: collapse" width="100%" cellpadding="0" bordercolor="#E6E6E6" border="1"><tbody>'
                    table += '<tr><td style="padding:5px;"><b>Status</b></td><td style="padding:5px;">' + this.responseText + '</td></tr>';
                    table += '</tbody></table></br>';
                }
                $('#divResult').html(table);
            };
            xhttp.send();
        }
    }
</script>

Handler Page

Handler.ashx

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;
using System.IO;

public class Handler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        context.Response.Write(File.ReadAllText(context.Server.MapPath("json.json")));
    }

    public bool IsReusable
    {
        get { return false; }
    }
}

Screenshot