I\'m trying to create a website in HTML which recieves JSON-formatted data using javascript and, then it will be injecting that data into my website.
The problem is
You're trying to implement JSONP which is a method to request data from a server in a different domain. Your data source (usually webservice) should be told to wrap its response with a function call around it. If you're data source didn't wrap the response then your client cannot receive the response if deployed to live environment although locally it works.
Here's what you can do if you have control or if you can modify your data source functions. (If not it's impossible to implement JSONP). The data source in my example is a REST Service.
//Data Source (REST Service)
[WebGet(UriTemplate = "getdata?callback={callback}&testParam1={p1}&testParam2={p2}")]
public void GetData(string testParam1, string testParam2, string callback)
{
//Callback method is one of the parameters
WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml";
var data = _db.GetRecords(testParam1, testParam2);
//wrap the response
HttpContext.Current.Response.Write(string.Format("{0}( {{ result:\"{1}\"}} )", callback, data));
}
//Client Implementation
function GetMainMarket(holder, template, testParam1, testParam2) {
$.ajax({
type: 'GET',
url: 'http://localhost:2520/DataServices/getdata',
data: { testParam1: 'test1', testParam2: 'test2' },
dataType: 'jsonp',
success: function (data) {
eval(data.result);
var output = $(template).parseTemplate(json);
$('#' + holder).html(output);
}
});
};