Jquery Ajax Returns the Whole Page

jQuery Ajax returns the whole page

That's how it works. You're requesting index.php via AJAX, so you'll get whatever the contents of index.php are.

If you want a particular value, make a new PHP page that outputs just that value, and request that URL's contents instead.

AJAX request returns entire HTML page instead of just the data I wanted it to echo

It sounds like you have other code in index.php, then?

If you only want it to print the ID, add an exit(); command just after it echoes the ID, so that the rest of the script is not processed in that situation. (That's assuming that the PHP code comes before the HTML in the file, of course.)

P.s. Most developers tend to separate the PHP which responds to Ajax requests from the PHP which deals with loading HTML pages. This

a) prevents the type of problem you're experiencing,

b) keeps the functionality clean and clear and separate, making unit testing a lot easier, and

c) takes a step to it being more like a fully-fledged API which just deals with data - and can potentially be called from other applications, services or front-ends too, if that's useful.

Ajax call returning whole page html in asp.net web forms

This is because you have set the datatype as html.
Change the datatype to text as follows:

dataType: 'text'

And also in the success function change this line

sessionStorage.setItem("accessToken", response.access_token);

sessionStorage.setItem("accessToken", response);

Because you are not receiving data in json format. So this will be invalid.

Ajax call return whole page instead of replacing a div tag

You are missing one javascript library which does the Asynchronous form posting for you. Add that to your page (Layout) and your asynchronous form posting should work fine.

<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-2.1.4.js"></script>

    <!--this is the new one to add-->
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
</head>

Jquery Ajax Returns the Whole Page