Random Word API Usage - javascript

I'm trying to use the random word api from setsetgo.
So I build this html to test it out
<!DOCTYPE html>
<html>
<body>
<script>
function RandomWord() {
var requestStr = "http://randomword.setgetgo.com/get.php";
$.ajax({
type: "GET",
url: requestStr,
dataType: "jsonp",
jsonpCallback: 'RandomWordComplete'
});
}
function RandomWordComplete(data) {
alert(data.Word);
}
RandomWord();
RandomWordComplete(data);
</script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
It seems like the script stop when I do $.ajax() . Though, I don't know what I'm doing wrong.

Try this:
function RandomWord() {
var requestStr = "http://randomword.setgetgo.com/get.php";
$.ajax({
type: "GET",
url: requestStr,
dataType: "jsonp",
}).done(RandomWordComplete);
}
function RandomWordComplete(data) {
alert(data.Word);
}
RandomWord();

Related

How is the scope different for ajax methods

I'm trying to call a JS method that uses ajax and jQuery from a .js file. I have the JS method defined in a .htm file, and I have access to some, but not all of the defined methods
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/script.js">
function testingAjax() {
$.ajax({
type: "GET",
url: 'IISHander1.cs/DeleteItem',
data: "",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
alert("success on all frontiers");
},
error: function (e) {
alert("Something Wrong.");
}
});
}
</script>
and I have another script right under that which defines:
function testingScope() { alert("in Scope");}
I've tested both and I can only call testingScope. The other results in a method not found error. Why is this?
A script tag can't have both an src and code text inside it. When the src exists the textual code will be ignored
Change to
<script>
function testingAjax() {
$.ajax({
type: "GET",
url: 'IISHander1.cs/DeleteItem',
data: "",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
alert("success on all frontiers");
},
error: function(e) {
alert("Something Wrong.");
}
});
}
</script>
<!-- moved below so you can call testingAjax() in this script -->
<script type="text/javascript" src="js/script.js"></script>

data in alert box using javascript

I try to populate data in alert box on button click but when I click on button then alert box not populate
I try this
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<button id="submitchart" runat="server">Show Chart</button>
</div>
</form>
</body>
<script type="text/javascript">
$('#submitchart').click(function() {
//alert("i");
$.ajax({
type: 'POST',
//url: 'WebForm1.aspx / Jqufunc',
//data: JSON.stringify({ yearP: $('#yearValue').val() }),
//data:{},
contentType: 'application/json;charset=utf-8',
dataType: 'json',
success: function() {
//alert(JSON.stringify(response.d));
alert("i");
}
});
});
//});
</script>
when I write alert("i") after this line $('#submitchart').click(function () { then alert box populate but when i write alert ("i") after the success: function() { then alert box not populate
any solution?
$(function () {
$("#submitchart").on("click", function () {
debugger;
alert("i");
$.ajax({
type: 'POST',
//url: 'WebForm1.aspx / Jqufunc',
//data: JSON.stringify({ yearP: $('#yearValue').val() }),
//data:{},
contentType: 'application/json;charset=utf-8',
dataType: 'json',
success: function () {
//alert(JSON.stringify(response.d));
debugger;
alert("i");
},
error: function () {
debugger;
alert("i");
}
});
ajax will be run error,don't run success
Give button type as button.
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<button id="submitchart" type="button" runat="server">Show Chart</button>
</div>
</form>
</body>
<script type="text/javascript">
$('#submitchart').click(function() {
//alert("i");
$.ajax({
type: 'POST',
url: 'WebForm1.aspx / Jqufunc',
data: JSON.stringify({ yearP: $('#yearValue').val() }),
//data:{},
contentType: 'application/json;charset=utf-8',
dataType: 'json',
success: function() {
//alert(JSON.stringify(response.d));
alert("i");
}
});
});
//});
</script>
This one worked for me.
This happening because when you write alert("i") after $('#submitchart').click(function () { then its not dependent on success of any ajax call and ot works fine as it should but when you write this after success: function() { then it is dependent on ajax call and if there is some errors in ajax it will not run as you have only defined it for successful ajax.
Write this if ajax contains errors also
$('#submitchart').click(function() {
//alert("i");
$.ajax({
type: 'POST',
//url: 'WebForm1.aspx / Jqufunc',
//data: JSON.stringify({ yearP: $('#yearValue').val() }),
//data:{},
contentType: 'application/json;charset=utf-8',
dataType: 'json',
success: function() {
//alert(JSON.stringify(response.d));
alert("i");
},
error: function() {
//alert(JSON.stringify(response.d));
alert("i");
}
});
});

Send a Json object to server with javascript function

I try to send a json object to a distant server, but I didnt receive success message. please what's wrong with this code:
function sendSMS(){
var input = '{"header":"****","****":*****,"****":"*****"}';
var url = "https://**********&username=*****&password=*******";
jQuery.ajax({
type: "POST",
crossDomain:true,
url: url,
data: JSON.stringify(input),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
async: false,
success: function(){
alert("success");
}
});
}
// html code
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.json.org/json2.js"></script>
<script type="text/javascript" src="sendSMS.js"></script>
</head>
<body>
<button onclick="sendSMS()">sendSMS</button>
</body>
</html>
Any help please.
You have to simple change your ajax call to this:
function sendSMS(){
var input = '{"header":"Ooredoo","msisdn":21620117297,"SMS":"Hello"}';
var url = "https://**********&username=*****&password=*******";
jQuery.ajax({
type: "POST",
crossDomain:true,
url: url,
data: JSON.parse(input),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
async: false,
success: function(){
alert("success");
}
});
}
The main changes are JSON.stringify to JSON.parse this will help you to parse the JSON data into a JSON object, and the second change is the actual payload in which you missed a " at the end, just after Hello.
If you have any other question, just ask :)
Also I would recommend not to send the username and password as querystring parameter, use a POST request with a proper payload and last, if you can go through ssl

Django Ajax not entrering in the function

When i press the link the program should go to the ajax function to update the database without reloading the page.
the problem is when the link is pressed doesnt enter in the JS function (doesnt show the alert)
<a href="#" onclick="xpto2()" >Remind later</a>
<script>
function xpto2(){
alert("hello");
$.ajax({
url: 'update-notify-status-noshow',
data: { postdata1: {{ n.id }} },
dataType: 'html',
type: 'get', )
success: function(output) {
alert(output);
}
});
</script>
Fix your xpto2 function. There are syntax errors. This should be something like this.
<script>
function xpto2() {
alert("hello");
$.ajax({
url: 'update-notify-status-noshow',
data: { postdata1: {{ n.id }} },
dataType: 'html',
type: 'get',
success: function(output) {
alert(output);
}
});
}
</script>
Make sure jQuery is present.
Keep browser console opened for better insights.
Here's a full template to try.
updates
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
function xpto2() {
alert("hello");
$.ajax({
url: 'update-notify-status-noshow',
data: { postdata1: {{ n.id }} },
dataType: 'html',
type: 'get',
success: function(output) {
alert(output);
}
});
}
</script>
</head>
<body>
<a href="#" onclick="xpto2()" >Remind later</a>
</body>
</html>

Ajax request to JSON not working?

I am trying to get some data from an API that provides JSON responses. I am brand new to all this. Can someone look at my code and tell me if there is a syntax reason it won't work? I want to hit the button and have an alert pop up containing the data sent back from the request. I think this is the most basic programming thing you can do, and I cannot seem to get it to work.
<head>
<script type="text/javascript">
$.ajax({
type: 'GET',
url: 'http://openapi.etsy.com/v2/teams/8787?api_key=********&fields=name',
async: false,
jsonpCallback: 'jsonCallback',
contentType: "application/json",
dataType: 'jsonp',
success: function(data)
{
alert(data)
}
})
</script>
</head>
<body>
<button onClick="$.ajax()">Run Code</button>
</body>
</html>
I rewrote your code:
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
function doStuff() {
$.ajax({
type: 'GET',
url: 'http://openapi.etsy.com/v2/teams/8787?api_key=********&fields=name',
async: false,
jsonpCallback: 'jsonCallback',
contentType: "application/json",
dataType: 'jsonp',
success: function(data)
{
alert(data)
}
});
}
</script>
</head>
<body>
<button onClick="doStuff()">Run Code</button>
</body>
</html>
Add an event handler unobtrusively with jQuery to button using an id.
<head>
</head>
<body>
<button id="button">Run Code</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$('#button').click(function(e){e.preventDefault();
$.ajax({
type: 'GET',
url: 'http://openapi.etsy.com/v2/teams/8787?api_key=********&fields=name',
async: false,
jsonpCallback: 'jsonCallback',
contentType: "application/json",
dataType: 'jsonp',
success: function(data)
{
alert(data)
}
})
});
</script>
</body>
</html>
Yes, there are several problems:
You are using jQuery, but you are not loading it.
You try to invoke the call when the page loads.
The onclick event handler tries to invoke $.ajax() call incorrectly (it does not have any parameters).
This is probably all.

Categories

Resources