Ajax request with JSONP and quote API - ajax

can somebody please explain the function of jsonp=? in this Ajax GET request?
$(document).ready(function(){
$.ajax({
url: "https://api.forismatic.com/api/1.0/?",
data: "method=getQuote&format=jsonp&lang=en&jsonp=?",
success: function(data){
$(".message").text(data.quoteText);
},
dataType: "jsonp"
});
});
Here's a link of this in action: https://codepen.io/ltcMatt/pen/VWeoMW.
Thanks in advance.
Cheers

Related

403 error on Ajax Post Laravel shared hosting

Site works completely OK on other hosting. That is also shared. But doesn't work on current hosting when an Ajax post request is made. The server(not app) responds with 403.
What should I do now? I used postman and it works okay. No problem in url also.
Update:
the code for ajax request:
$.ajax({
type: "POST",
url: window.location.href.split('?')[0],
data: data,
success: function(data){
window.location = data.redirect_to;
},
error: function(data){
},
dataType: 'json'
});
The problem was "not setting" content-type in headers.
I changed the code into:
$.ajax({
type: "POST",
url: window.location.href.split('?')[0],
data: JSON.stringify(data),
success: function(data){
window.location = data.redirect_to;
},
error: function(data){
},
dataType: 'json',
headers: {
'Content-Type':'application/json'
}
});
And it worked.

Linking AJAX with PHP code. Do i need to write it again?

I have a real problem. I have a php code and a form where when the form is submitted a POST request is sent and the page reloads again and ofcourse the post is viwed in the page.But i want to work with AJAX in order page not to be refreshed.I know the basics of AJAX but i don't want to build all the project from the beggining.Is there a way in success function of AJAX to link to my php code??
$.ajax({
type: "POST",
url: "index.php",
datatype: "html",
data: dataString,
success: function(data) {
//How can i link here to start running my php code which is located in the same page.
}
});
$.ajax({
type: "POST",
url: "somescript.php",
datatype: "html",
data: dataString,
success: function(data) {
// try this
console.log(data);
// see what 'data' actually is
}
});
then check in the browser by hitting F12 to look at the console.
also are you sure you want datatype of html ? you probably want a data type of json or XML , what is the server returning to you after the ajax post?
You have to cancel the form's submission so that the ajax request will take place, otherwise it is canceled. Also use .serialize to get a name-value pair string of the form data to use in the ajax call.
Html
<form id="MyForm">
<button id="MyButtonId">Submit</button>
</form>
JS
$("#MyForm").submit(function(e){
//Prevents the form from being submitted
e.preventDefault();
$.ajax({
type: "POST",
data: $("#MyForm").serialize(),
url: "somescript.php",
datatype: "html",
data: dataString,
success: function(data) {
alert(data);
}
});
});

jQuery.ajax POST request converted to GET

I have the following jQuery code:
$.ajax({
url: Url,
dataType: 'JSONP',
type: 'POST',
success: function (data, textStatus, jqXHR) {
//callback function here
},
error: function (xhr, ajaxOptions, thrownError) {
//report error
}
});
However, when i view this AJAX request in Fiddler, my request has been converted from a POST to a GET.
This is not allowed with the API I'm connecting to, as it must be a POST request.
Why is this happening?
JSONP requests can only be GETs.
Remove dataType: 'JSONP'.
dataType: 'JSONP',
is always a GET request
You cannot use POST with JSONP see https://groups.google.com/forum/?fromgroups=#!topic/jquery-dev/5-tKI-7zQvs for more detail on this.

jqgrid: how to use searchfunction?

I am trying to create an alfabetic index to quickly search for records in my jqGrid.
So for letter A it is:
$("#Aletter").click(
function (e) {
e.preventDefault();
$.ajax({
url: '#Url.Action("Products")',
type:'POST',
data: '_search=true&nd=1345519741915&rows=10&page=1&sidx=ProductID&sord=asc&filters=%7B%22groupOp%22%3A%22AND%22%2C%22rules%22%3A%5B%7B%22field%22%3A%22ProductName%22%2C%22op%22%3A%22bw%22%2C%22data%22%3A%22a%22%7D%5D%7D&searchField=&searchString=&searchOper='
});
});
In fiddler it returns the right data.
The only problem is how to get it into the grid?
You can use .addJSONData(data); method in your ajax success method.
$.ajax({
url: '#Url.Action("Products")',
type:'POST',
data: '_search=...',
success: function(data){
$("gridId").addJSONData(data);
}
});
See the jqgrid wiki.

AJAX on click not calling/loading as it should

I have been learning AJAX for the best part of 2 hours, trying to get my head around how to get this to work, it seems it is calling the function as if I put an alert in, it all works fine.
I tried using another method and it seemed to call the function on it's own and it would load what the .php page is echoing.
What am I doing wrong in order for it to not work at all?
<script type="text/javascript">
$('a.fire').click(call_ajax);
function call_ajax() {
$.ajax({
type: "GET",
url: "http://127.0.0.1/onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
}
});
}
</script>
Edit: I have also just tried
$('a.fire').click(function() {
$.ajax({
type: "GET",
url: "http://127.0.0.1/onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
}
});
});
Which also does not work.
EDIT: I have now got code that GET's the php file I wanted, but for some reason does it on it's own
<script type="text/javascript">
function call_ajax() {
$.ajax({
type: "GET",
url: "http://127.0.0.1/onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
}
});
}
<script type="text/javascript">
$(function() {
$(document).ready(function() {
$('a.fire').click(call_ajax());
});
});
The issue with this code is that it fires on it's own
EDIT: Now have new code, that is attempting to fire according to Firebug console but I get the alert ERROR: error, so I don't have a clue what is happening in order for it to fail, I have also tried many different URL's with no working solution
$('a.fire').click(function () {
$.ajax({
type: "GET",
url: "/onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
},
error:function(xhr, text, error){
alert("Error: " + text);
}
});
});
SOLVED: I have now got it to work! For some reason my anchor had a href of "", which would cause it to reload the page and removing my GET from the page
ajax will only work if it's the same domain. This means that if you execute jQuery from domain x to domain y, it won't work. This is for safety-reasons to prevent websites from loading from another website. Does your jQuery-ajax call work if you remove the 127.0.0.1 from your url?
Furthermore I guess you should add the click-function inside your $(document).ready(); function, like this:
$(document).ready(function(){
$('a.fire').click(function() {
$.ajax({
type: "GET",
url: "onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
}
});
});
});
for testing purposes, you can also use the complete function inside your ajax and alert your data. firebug can be helpful too to find your problem :)

Resources