So I am doing some testing with the food2fork api.
I seem to be getting a 404 forbidden.
Have looked and cannot find anything that has worked.
http://food2fork.com/about/api
Code below
$(document).ready(function() {
$("#button").click(function(event) {
event.preventDefault();
var searchTerm = $("#input").val();
showResults(searchTerm);
});
function showResults(searchTerm) {
$.ajax({
key: "xxxx",///api key
type: "GET",
dataType: 'jsonp',
url: "http://food2fork.com/api/search",
q: searchTerm,
success: function (data) {
alert('success');
}
});
}
});
The q and key properties of the object you're passing to $.ajax are ignored because they're invalid. It should be part of the request data.
Try this instead:
$.ajax({
type: "GET",
data: { q: searchTerm, key: 'yourKey' },
dataType: 'jsonp',
url: "http://food2fork.com/api/search",
success: function (data) { alert('success'); }
});
See Documentation
Related
im using the function below to get image names. I also use the json code to get data of a different url, but somehow it isnt working at this. (im new to javascript. Just writing php normally.
function getImgname(name) {
$.getJSON("http://url.com/info.php?name="+name, function(json321) {
return json321.js_skininfo;
});
}
Try this:
function getImgname(myName) {
$.ajax({
url: 'http://url.com/info.php',
data: {
name: myName
},
type: 'POST',
dataType: 'json',
success: function(data) {
// do what you want with your data
return data.js_skininfo;
}
});
}
I tried this now:
function getImgname(myName) {
$.ajax({
url: "http://url.com/ninfo.php",
type: 'POST',
dataType: 'json',
success: function (data) {
return data.js_skininfo;
},
error: function () {
}
});
}
This isnt working (undefinied), but if i alert the data.js_skininfo it shows me the correct value.
The web service on http://localhost:57501/api/addDatabase has the following code.
[System.Web.Mvc.HttpPost]
public ActionResult Post(addDatabase pNuevaConeccion)
{
pNuevaConeccion.insertarMetaData();
return null;
}
The Ajax function is on a javascript that creates the JSON from the give values on http://localhost:1161/CreateServer.
$(document).ready(function ()
{
$("#createServer").click(function (e) {
e.preventDefault(); //Prevent the normal submission action
var frm = $("#CreateServerID");
var dataa = JSON.stringify(frm.serializeJSON());
console.log(dataa);
$.ajax({
type: 'POST',
url: 'http://localhost:57501/api/addDatabase/',
contentType: 'application/json; charset=utf-8',
crossDomain: true,
//ContentLength: dataa.length,
data: dataa,
datatype: 'json',
error: function (response)
{
alert(response.responseText);
},
success: function (response)
{
alert(response);
if (response == "Database successfully connected") {
var pagina = "/CreateServer"
location.href = pagina
}
}
});
});
});
When I run this code an alert pops up saying "undefined" but if I delete the contentType the alert doesn't show up. The problem is that the variables that the function Post (from the web service) receives are NULL even though I know that the JSON named dataa is not NULL since I did a console.log.
I have seen various examples and pretty much all of them say that I should use a relative URL but the problem is that since there are 2 different domains and when I tried it, it couldn't find the URL since it's not in the same localhost.
Web service should return a JSON format instead of null. like below example.
public JsonResult Post()
{
string output = pNuevaConeccion.insertarMetaData();
return Json(output, JsonRequestBehavior.AllowGet);
}
try to use this code for calling the web method
$.ajax({
method: "POST",
contentType: "application/json; charset=utf-8",
data: dataa,
url: 'http://localhost:57501/api/addDatabase/',
success: function (data) {
console.log(data);
},
error: function (error) {
console.log(error);
}
});
its my old code.(ensure action parameter variable name and post variable name are same)
$('#ConnectionAddres_ZonesId').change(function () {
var optionSelected = $(this).find("option:selected");
var id = { id: optionSelected.val() };
$.ajax({
type: "POST",
url: '#Url.Action("GetParetArea", "Customers")',
contentType: "application/json;charset=utf-8",
data: JSON.stringify(id),
dataType: "json",
success: function (data) {
$('#ConnectionAddres_ParentAreaId').empty().append('<option value="">Select parent area</option>');
$.each(data, function (index, value) {
$('#ConnectionAddres_ParentAreaId').append($('<option />', {
value: value.Id,
text: value.Area
}));
});
},
});
});
public ActionResult GetParetArea(int id)
{
var parents="";
return Json(parents, JsonRequestBehavior.AllowGet);
}
How to pass an additional data with form serialize data on ajax post method?.
below is my code which was using for ajax post,
$(document).ready(function()
{
var additional_data=$("#extra_data").val();
$.ajax({
type: 'POST',
url: 'send_mail.php',
data: frm.serialize(),
success: function (data) {
alert(data);
}
});
});
here, how to pass a additional_data with serialize form data
From jQuery API DOCS
The .serializeArray() method creates a JavaScript array of objects
The .serialize() method creates a text string in standard URL-encoded notation.
I think to use push , we need to use serializeArray
try to use
var frmData = frm.serializeArray();
frmData.push({name: "name", value: "test"});
$(document).ready(function()
{
var additional_data=$("#extra_data").val();
$.ajax({
type: 'POST',
url: 'send_mail.php',
data: frmData,
success: function (data) {
alert(data);
}
});
});
You need to push the elements to the existing serialized data.
var frmData = frm.serialize();
frmData.push({name: nameofthevariable, value: valueofthevariable});
frmData.push({name: nameofthevariable2, value: valueofthevariable2});
frmData.push({name: nameofthevariable3, value: valueofthevariable3});
$(document).ready(function()
{
var additional_data=$("#extra_data").val();
$.ajax({
type: 'POST',
url: 'send_mail.php',
data: frmData,
success: function (data) {
alert(data);
}
});
});
serialize() create a query string of the form. So you can append additional parameters into it.
$(document).ready(function()
{
var additional_data=$("#extra_data").val();
$.ajax({
type: 'POST',
url: 'send_mail.php',
data: frm.serialize()+'¶m1='+value1+'¶m2='+value2,
success: function (data) {
alert(data);
}
});
});
serializearray() can be used to send additional parameters. PFB code for sending additional parameters.
var request = $('form').serializeArray();
request.push({name: "kindOf", value: "save"});
Ajax call
$.ajax({
url: "/ST/SubmitRequest",
dataType: "json",
//contentType: "application/json",
type: "POST",
data: request,
//data: r1,
success: function (response) {
//Setinterval();
//alert("Done...!");
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
This AJAX works on jsfiddle
var a = $.ajax({
url: "/echo/json/",
type: "post",
data: {
json: JSON.stringify({
a: true
})
},
dataType: "json"
});
a.done(function (data) {
console.log(data);
});
Why won't it work when I make a the function and return the AJAX promise?
var a = function () {
return $.ajax({
url: "/echo/json/",
type: "post",
data: {
json: JSON.stringify({
a: true
})
},
dataType: "json"
});
}
a.done(function (data) {
console.log(data);
});
Is this not the correct syntax? Well, apparently not, but how can I build the AJAX request into the function? FIDDLE
Since a is a function, you have to call it:
a().done(function(data) {
console.log(data);
});
I have many Bootstrap Type-ahead attached to my text-box.
I was using there id to select then and attach typeahead.
Sample
$("#SireTag").typeahead({
source: function (query, process) {
$.ajax({
url: '/Bull/GetSireTag',
type: 'POST',
data: 'query=' + query,
dataType: 'JSON',
async: true,
success: function (data) {
console.log(data);
process(data);
}
});
}
});
Now i decided to make it more readable and short by using a single java-script code to attach type ahead to all my text-boxes.
<input data-typeahead-url="/Bull/GetSireTag" id="SireTag" name="SireTag" type="text" value="">
New Javascript
$('*[data-typeahead-url]')
.each(function () {
alert(this);
$(this).typeahead({
source: function (query, process) {
$.ajax({
url: $(this).data("typeahead-url"),
type: 'POST',
data: 'query=' + query,
dataType: 'JSON',
async: true,
success: function (data) {
console.log(data);
process(data);
}
})
}
});
});
But its not working i am not so proficient with java-script anyone now whats wrong.
I tried developers tool ajax request is not made.
$('*[data-autocomplete-url]') doesn't select your elements because you're using data-typeahead-url.
You need to return the ajax result to the source, also don't use alert() to debug, use console.log() instead:
$('input[data-typeahead-url]').each(function () {
$(this).typeahead({
source: function (query, process) {
return $.ajax({
url: $(this).data("typeahead-url"),
type: 'POST',
data: { query: query },
dataType: 'json',
async: true,
success: function (resp) {
console.log(resp);
return process(resp);
}
});
}
});
});
Hope it helps.
$('*[data-typeahead-url]')
.each(function () {
var url = $(this).data("typeahead-url");
$(this).typeahead({
source: function (query, process) {
$.ajax({
url: url,
type: 'POST',
data: 'query=' + query,
dataType: 'JSON',
async: true,
success: function (data) {
console.log(data);
process(data);
}
})
}
});
});
Problem: The code was making ajax request but to the same address.
Diagnose: I tried log($(this).data("typeahead-url");) which gave desired output.
Solution: I created and stored the Url the used it as a parameter in ajax call
var url = $(this).data("typeahead-url");
Hope this help.