jQuery AJAX function returning strange output - javascript

I'm playing around with AJAX requests to a php file via jQuery, and I'm getting some strange output.
main.php:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="/stylesheets/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<?php
include('main.html');
?>
<script type='text/javascript'>
$('#startButton').click(function() {
$.ajax({
method: "POST",
url: "test.php",
}).done(function(data) {
alert(data);
});
});
</script>
</body>
test.php:
<?php
echo 'Hello';
?>
Instead of alerting 'Hello' on button click, my program alerts the html of main.php. Any idea what's going on?

Figured it out - I'm using GoogleAppEngine and my app.yami file was not configured to direct requests to test.php, as it defaults all requests to main.php, hence the returned html.
Apologies for not stating that I was using GAE - I didn't think it was relevant.
Credit to #Dagon for suggesting that it was a redirecting error which led me to the correct answer.

Related

AJAX PHP Blank POST Data Sent Godaddy

I can't seem to get this simple script to work on a godaddy webserver but it works fine on my localhost. Any suggestions would be appreciated! Pretty much I've isolated that ajax is not passing the data to the other .php file, I just have no idea why. I've rewritten it many times now. It works fine locally, just not on my web server.
pleasework.php
<?php
?>
<html>
<head>
<link rel="stylesheet" href="https://cdn.metroui.org.ua/v4.3.2/css/metro-all.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
</head>
<body>
<p id="test"> please work..</p>
<form>
<button type="button" onclick="clickit()">test it</button>
</form>
</body>
<script>
function clickit() {
$.ajax({
type: "POST",
url: "worked.php",
data: { workvariable: "I hope it worked" }
})
.done(function( response ) {
alert("Success.");
$("#test").html(response);
})
.fail(function() {
alert("Sorry. Server unavailable. ");
});
}
</script>
</html>
worked.php
<?php
$workvariable = $_POST['workvariable'];
?>
<p id="pleasework">
<?php echo $workvariable; ?>
</p>
It had to do with the path. The Localhost which was WAMP didn't have any issue with it, but once on the web server it needed the full path.
Thank you everyone!

How to convert JavaScript variable into PHP through ajax

its the code for posting a javascript variable into php...
but its not working..sugesstion...
i want to take value of id from javascript and post into a php.
<!DOCTYPE html>
<html>
<body>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$("form").submit(function() {
var id = $("input[type=submit]").attr('id');
alert(id);
$.ajax({
type: 'post',
url:('abcde.php')
data: {id1: id},success: function(response){}
alert(id1);
});
});
});
</script>
</head>
<form action="abcde.php" method="POST">
<!-- other form fields -->
<input type="submit" id="a" name="idVal" value="a">
</form>
</body>
</html>
<?php
if(isset($_POST['id']) ){
$id=$_POST['id'];
echo $id;
}
?>
ohh boy, 1st: it's
data: {'id': id}
secondly, your code is really wrong on this part, you are not doing anything in success, and you just randomly put an alert() in, with a variable that doesn't even exist.
So instead of success: function(response){}, it should be success: function(response){alert(response);} and forget about the alert(id1);
Other errors I saw from looking at it quickly: you are submitting your form from AJAX and HTML as well. You should block the default behavior with a function at the beginning of .submit(funcition() {...}. There already is a function for that, but I can't remember.
Lastly, you are sending the form data to the same page you are submitting from. You will get an answer from AJAX with the same page you are looking at. You should extract the php code to a different file and make abcde.php a simple abcde.html file.
One last thing: instead of alerts, you should use Console.log and watch the browser's console for debugging. You will see a bunch of errors, which makes debugging a lot easier.
You should, instead of blindly coding, be more mindful about what is responsible for what. You should be thinking more about the side-effects of you are introducing to your code. This will come with experience, we've all been there. Make sure one 'thing' is only responsible for ONE task.

"get" call from jquery/ajax not retrieving output from php file on localhost

I'm trying to feed the output from a php file into a javascript variable. My code looks like this -
PHP file:
<?php
echo "Hello World!";
?>
HTML file:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
var data_from_ajax;
$.get('http://127.0.0.1/output.php', function(data) {
data_from_ajax = data;
});
</script>
</body>
</html>
I'm using python's SimpleHTTPServer for temporary testing. The error that returns from the script is Failed to load resource: net::ERR_CONNECTION_REFUSED. What am I doing wrong?
EDIT:
So I replaced the url with http://127.0.0.1:8000/output.php, and now the error has disappeared. When I type that URL into chrome, the php file downloads to my computer. Now however, when I try console.log(data_from_ajax), it returns "undefined", and still nothing shows up on the page. What could be going wrong?

jQuery POST to PHP appears in browser, but not the PHP file

I've been pulling my hair out over this problem and I must have searched through over fifty other questions on here, to no avail. I'm trying to code a website using PHP, MariaDB, jQuery, and other web development technologies, however I've encountered issues trying to post variables from the client-side (with jQuery) to the server-side (PHP). I created a very simple file just to isolate the problem that I'm having:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<script type="text/javascript" src="jquery.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function()
{
$.ajax({
type: "POST",
url: "index.php",
data: {'name': "name1"},
});
});
</script>
<body>
<?php
if(isset($_POST["name"])){
$i=$_POST["name"];
echo "num: ".$i;
}
else{
echo "No information supplied";
}
?>
</body>
</html>
I refresh the page, and I constantly get the failure message "No information supplied". I know the POST is getting sent to the browser, because I can see it in Firebug, and its status code is 200 OK, so I know that I must be doing something correctly. Is my PHP syntax messed up? I know that this will work just fine when I'm pulling data from forms embedded in the regular HTML.
Thank you for your assistance, and I apologize in advance if this is a really simple problem. I'm trying to learn web development as well as possible. I feel like I've tried everything, down to using the longer .ajax way of sending a POST variable, rather than using .post().
Here is your answer, you will be testing to see if there is an ajax request, if so process it, if not spit out your original page. As for the ajax call we are adding a success callback that will then update your body tags with your returned. data
<?php
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){
if(isset($_POST["name"])){
$i=$_POST["name"];
echo "num: ".$i;
}
else{
echo "No information supplied";
}
die;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<script type="text/javascript" src="jquery.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function()
{
$.ajax({
type: "POST",
url: "index.php",
data: {'name': "name1"},
success: function(data){
$('body').html(data);
}
});
});
</script>
<body>
this is the original body content
</body>
</html>
Your PHP code runs before you trigger the ajax request, because the server interprets and runs PHP before you get to see the resulting HTML in the browser
What you need is add a success callback in the ajax request object which will get the result of ajax request and do something useful with it, such as place it into a <div> element. The example below simply displays it
$.ajax({
type: "POST",
url: "index.php",
data: {'name': "name1"},
success: function(serverReponse){ alert(serverResponse) }
});

PHP file_get_contents and CURL failure to fetch the content of a javascript based page

I have tried both file_get_contents and CURL to fetch the content of a specific page. I setup the CURL to follow redirects and changed User-Agent, however, it did not work. I have no problem when loading page in browser. I get a page with below code whenever I try to fetch it with file_get_contents or CURL:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Loading ...</title> <script
src="/jquery.js" type="text/javascript"></script> </head> <html> <noscript>Enable java!</noscript> <div id="status"></div> <script type="text/javascript">
function check(){ $.ajax({
type: "POST",
url: "/index.php",
data: "allowed=5b91b80a061537ae6a23835aba38279e",
success: function(html){if(html == "allowed"){location.reload();}},
beforeSend:function(){
$("#status").html("Loading ...")
}
});
}
$(document).ready(function(){
check();
});
</script> </html>
Is there anyway to bypass such restriction without using Javascript based Web Scrapers like PhantomJs, CasperJs or ZombieJs? Simply using a plain PHP?

Categories