How to Display Json Data when ajax request is success - ajax

Question

Here I am using Ajax+Mvc when I call my data from database it comes in Json format but how can I display that data in div?
Html
<div id="Div1">
</div>
<b>Get data</b><input type="button" id="BtnGetData" value="GetData" />
When user click on BtnGetData the data should be display in #Div1 Here my AJax working fine.But please suggest me where to write $('#Div1').load();
$('#BtnGetData').click(function () {
alert('ok data')
$.ajax({
url: '/Home/Getdata',
method: "GET",
type: "JSON",
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(),
})
})
MvcController
public JsonResult Getdata()
{
var x = Objrepo.GetEmplo();
return new JsonResult { Data = x, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}

Answer 1

You can write to the div on the success function of your $.ajax call.
eg:
$('#BtnGetData').click(function () {
$.ajax({
url: '/Home/Getdata',
method: "GET",
type: "JSON",
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(),
success: function (data) {
console.log(data);
}
})
});

Answer 2

You need to add a success callback to your ajax:
$('#BtnGetData').click(function () {
alert('ok data')
$.ajax({
url: '/Home/Getdata',
method: "GET",
type: "JSON",
contentType: 'application/json; charset=utf-8',
success: function(data){
$("#Div1").append(data);
}
})
})
There is no need to add the data property to the ajax if your are not sending anything.

Answer 3

May be, you can add this function in your script.
$('#BtnGetData').click(function () {
alert('ok data')
$.ajax({
url: '/Home/Getdata',
method: "GET",
type: "JSON",
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(),
writeResponse(data)
})
});
writeResponse(data){
$("Div1").html(data);
};