JQuery Ajax petition is modifiying given URL - javascript

I want to consume a API Rest aplication using JQuery Ajax. this is the code that I have:
var res=$('#myForm').attr('action');
console.log(res);
$.ajax({
url: res,
success: function (data) {
alert('success!!');
},
dataType: 'html'
});
The console.log sentence is printing the url correctly, I just copied and pasted it into the browser and its correct, it's something like this:
http://localhost/myproject/public/2
But then, the request gives a 404 error, and the URL that is requesting is this one:
http://localhost/localhost/myproject/public/2
So, why it's attaching another localhost line to the url? I just don't understand!

All you need is to get the part after localhost. For this, please use split method.
var res=$('#myForm').attr('action');
console.log(res);
$.ajax({
url: res.split('localhost')[1],
success: function (data) {
alert('success!!');
},
dataType: 'html'
});

Related

JavaScript URL issue with Permalinks enabled

I am using the following JavaScript function to fetch the data using ajax call
function findName() {
var name = "Jhon";
$.ajax({
method: "POST",
url: "oc-content/themes/bender/ajax-test.php",
data: { name : name },
success: function (data) {
alert(data);
},
})
}
It calls the following php file and works fine.
http://127.0.0.1/osclass/oc-content/themes/bender/ajax-test.php
But when I enable SEO friendly Permalinks in my CMS current page URL is appended in start of link and I get the following error in Chrome Console.
GET http://127.0.0.1/osclass/fashion-beauty/oc-content/themes/bender/ajax-test.php?name=Jhon 404 (Not Found)
Anybody tell me how to solve this issue?
The url you've provided in the ajax call is document relative. When you changed the server's url generation scheme, you also caused the url pointed at by the ajax call to change.
Adjust the ajax url, changing:
url: "oc-content/themes/bender/ajax-test.php",
To:
url: "/osclass/oc-content/themes/bender/ajax-test.php",
Why don't you make the URL server-relative? Something like this:
function findName() {
var name = "Jhon";
$.ajax({
method: "POST",
url: "/osclass/oc-content/themes/bender/ajax-test.php",
data: { name : name },
success: function (data) {
alert(data);
},
})
}
As you have not posted the php code. I would mention that any url directly navigated through addressbar of browser causes in the GET request and i can see you have a POST request in the ajax, so, it can't work.
Workaround would be to use $_REQUEST super globals at php end. $_REQUEST would work for $_GET/$_POST requests.

Passing variables with URL not working quite right using PHP and ajax

I'm using AJAX to update a page every 5000 milliseconds. It works great but I have ran into one issue. When I try and get data that is in the URL using $_GET or $_POST it does not work. It instead returns a value of a 1. Here is some example code.
In main.php I have this:
$(document).ready(function worker() {
$.ajax({
url: 'Request.php',
type: 'POST',
success: function(data) {
$('#Live_data').html(data);
},
complete: function() {
setTimeout(worker, 5000);
}
});
})();
and when this is called it fires off the request.php. In request.php I have some code to grab what was added in the URL by a previous page but it dose not work. It goes something like this:
$value = $_get['test'];
This is supposed to return the value in the URL parameter test but it does not work.
Thanks!
You forgot to send data with the ajax query,
In this code, you can add GET data by append a query string to url value, or send POST data by setting data property of the request,
$.ajax({
url: 'Request.php?query=string&is=here',
type: 'POST',
data: {to: 'post', goes: 'here'},
success: function(data) {
$('#Live_data').html(data);
},
complete: function() {
setTimeout(worker, 5000);
}
});
see also https://api.jquery.com/jquery.post/#jQuery-post-settings
I've commented it as well but I'll post it as answer:
Change POST to GET in your jQuery AJAX request.
Use request.php instead of Request.php or the other way around.
Use $_GET instead of $_get. This variable is case sensitive.
Your not sending any data here. You can send the required data in Url or in Data Field.
url: 'Request.php?test=xyz',
or
data: data,

Call post on external Rest API with Ajax

I am new to angular, and I'm trying to make a call to a Rest API and get its response. My issue is that my JavaScript keeps getting stuck on the Ajax call. I'm not sure if it's the data I am sending or the syntax of the Ajax call. I tried to alert 'Hello world' and that worked, then I alerted the JSON array and that was formatted correctly, but when I do the Ajax post, I don't get any response at all.
Any insight would be nice, thank you.
test.html
<button onclick="myFunction()">Post it</button>
test.js
function myFunction() {
var postData = [{"logintype":"1","user":"Administrator","password":"12345","controlid":"999","host":"192.168.2.164"}
];
$.ajax({
url: '192.168.2.164/isapi/rip.dll/rest/session',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify( postData ),
success: function(){
alert('hello');
},
error: function(){
alert('error');
}
});
};
You have specified a relative URL, where I think you intended to specify an absolute URL. If the current page URL is http://localhost/myapp/, and you request 192.168.2.164/isapi/rip.dll/rest/session, that URL is resolved as http://localhost/myapp/192.168.2.164/isapi/rip.dll/rest/session.
If 192.168.2.164 is the ip address of the server you are trying to hit (and not a directory relative to your current path on your server), you will need to add // to the beginning of the URL to make it absolute (well, schema-relative at least):
$.ajax({
url: '//192.168.2.164/isapi/rip.dll/rest/session',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify( postData ),
success: function(){
alert('hello');
},
error: function(){
alert('error');
}
});
Your issue has nothing to do with angular. What I will refer you to is the angular docs description of how to do a POST request and a small example of the syntax taken from the docs.
Learn to use $http or something similar if you want to develop with angular. https://docs.angularjs.org/api/ng/service/$http
Small example:
// Simple POST request example (passing data) :
$http.post('/someUrl', {msg:'hello word!'}).
then(function(response) {
// this callback will be called asynchronously
// when the response is available
}, function(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});

ajax function not fetching url

I have:
function makeAjaxRequest() {
var url = '/queryjob/dbname/ip';
$.ajax(url,
{
success: alert(response)
});
}
When I do a normal browser request on this url I get a response of 43(just a test response right now)
When I click the button I have to run this function, nothing happens. I don't see a get request in the log at all. Do I have some stupid syntax error or something? I am pretty new to js and ajax. I have another function that works where I get a url and act on the html response code, but this one is killing me so far.
You are not calling $.ajax correctly. Assuming you wanted to make a GET request, this is the correct syntax:
$.ajax({
type: 'GET',
url: url,
success: function(response) {
alert(response);
}
});
You could also use $.get to accomplish the same thing:
$.get(url, function(response){
alert(response);
});
$.ajax({
type: "GET",
url: "/queryjob/dbname/ip",
success: function (data) {
alert(data);
}
});
Yes, it was a syntax error ;)

Extract and read JSON Data from web API

What I'm working on is providing 1 line instant definitions of terms and perhaps one line answers to few logical questions. Suppose a user inputs "JavaScript" and JavaScript visits the url https://api.duckduckgo.com/?q=JavaScript&format=json&pretty=1, gets the item "Definition" (Look at the API link to understand, Definition is in the first line itself) and displays its value of Definition and alert the user with the required data.
Anyways my code currently is:
<html>
<head>
<title>Hi</title></head>
<body>
<input id="ddgAPI"><button>Search</button>
<div id="output"></div>
</body>
</html>
Please note that I've not put in the required JavaScript/jQuery code as I'm confused with this. Thank you :)
Because this is a cross-domain request you can only do this with a proxy or with JSONP. Fortunately DuckDuckGo supports JSONP, so you just need to ensure that you add a callback parameter to the URL request like:
https://api.duckduckgo.com/?q=JavaScript&format=json&pretty=1&callback=jsonp
... or use the appropriate jsonp parameter with jQuery's ajax method, something like:
$('#ddgAPI').on('keyup', function(e) {
if (e.which === '13') {
$.ajax({
type: 'GET',
url: 'https://api.duckduckgo.com/',
data: { q: $(this).val(), format: 'json', pretty: 1 },
jsonpCallback: 'jsonp',
dataType: 'jsonp'
}).then(function (data) {
console.log(data);
});
}
});
Use jQuery.ajax() to talk to the remote service. url should be https://api.duckduckgo.com. type should be GET. data should be:
var data = { q:'JavaScript', format:'json', pretty:1 };
jQuery will then compile everything into an AJAX request, send it to the server. Pass a function as success so you can do something with the result:
$.ajax({
url: "https://api.duckduckgo.com",
type: "GET",
data: { q:'JavaScript', format:'json', pretty:1 },
success: function(data) { $('#output').html(data); }
});

Categories

Resources