Lately I've been experimenting with AJAX and jQuery. But somehow $.post method doesn't seem to work. Anybody got solutions?
Here's my code.
<html>
<meta charset="utf-8">
<head>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
function send(){
$.post('t.php', {stuff:1}, function(data){
if(data == 'success'){
alert('works');
}
});
}
</script>
</head>
<body>
<div id="btn" onclick="send()">CLICK</div>
</body>
</html>
and my t.php:
<?php echo "success";?>
It works actually but you don't know that how to get response from php file properly
Change ajax code like below:
$.post('t.php', {stuff:1}, function(data){
if(data[0] == 's'){//changed here. data is an array not string
alert('works');
}
});
And in php
<?php echo "s";?>
Related
It seems that this question has already been asked many times but none of the solution is working for me. I'm new to AJAX so maybe there are some basics that I've missed? Basically I just want to pass the content of an html paragraph to a PHP script and I don't want to use html form.
I have two files: tes.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#post").click(function(){
var getContent = $("#text").html();
$.ajax({
url:"tes.php",
type:"POST",
data:{text:getContent},
dataType:"html",
});
});
});
</script>
</head>
<body>
<p id="text" contenteditable="true">This is the content</p>
<button id="post">post 2</button>
</body>
</html>
and tes.php
<?php
if (isset($_POST['text'])) {
$content = $_POST['text'];
echo $content;
} else {
echo "no content";
}
?>
After I clicked the Post button, in the PHP file it returns
Notice: Undefined index: text in C:\xampp\htdocs\projects\lab\tes.php on line 3.
Where did it go wrong? Really need your help guys. Thanks!
can you try this
$(document).ready(function(){
$("#post").click(function(){
var getContent = $("#text").html();
$.ajax({
url:"tes.php",
type:"POST",
data:{text:getContent},
dataType:"html",
success:function(data) {
console.log(data)
}
});
});
});
and in the HTML (as reza suggested)
<button id="post">post 2</button>
then, open the developer console and see if you can see the response from the tes.php
change html
<button id="post2">post 2</button>
to
<button id="post">post 2</button>
You have a click event and that sends an AJAX request so far, so good. You have
target="_blank"
which makes sure the page is opened in another tab/window. As far as I understood, you only want to send the request, so you need to prevent default:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#post").click(function(e){
e.preventDefault();
var getContent = $("#text").html();
$.ajax({
url:"tes.php",
type:"POST",
data:{text:getContent}
});
});
});
</script>
</head>
<body>
<p id="text" contenteditable="true">This is the content</p>
<button id="post">post 2</button>
</body>
</html>
The new tab/window will give you the error, since an expected parameter is not there, so don't open it.
I am beginner to ajax world and trying to call contents from php page using $.ajax() function and the code couldn't executed. the html page i used:
<!DOCTYPE html>
<html>
<head>
<title>AJAX</title>
</head>
<body>
<div >
<input type="text" name="search" id="search">
<br>
<br>
<h2 id="result"></h2>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>
the JQuery code i used in the script.js:
$(document).ready(function() {
$('#search').keyup(function () {
var search = $('#search').val();
$.ajax({
url:'search.php',
//the page to which the request will go to
data:{search: search},
type: 'POST',
success:function(data) {
if(!data.error){
$('#result').html(data);//the h2 we want to echo it uing the ajax
}
}
});
});
});
the search.php page contain:
$search = $_POST['search'];
echo $search;
the code not executed. What should I do.
I see some issue in your response from PHP code and in ajax side success code.
You are not sending in response JSON format so data.error is meaningless.
so in your success callback code should be like this.
success:function(data) {
$('#result').html(data);//the h2 we want to echo it uing the ajax
}
Follow jQuery Ajax Document :
An alias for method. You should use type if you're using versions of jQuery prior to 1.9.0
type: 'POST'
But you are using 2.0 so i think this will work :
method: 'POST'
jQuery Documents
I am using ajax for the first time and passing data to another file using ajax request. The request goes through if I pass it using get which is by default but the moment I change it to post it does not work.
$.ajax({
type:'POST',
url:'pageAjax2.php',
data:'name='+name,
success: function(data){
$('#content').html(data);
}
})
If I remove the type:'POST'; everything works but if have it in the code nothing works . Can someone please help me with this.
All good here. What version of jQuery are you using ?
I'll post my code :
File jq.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(function(){
var name = 'Telmo Dias';
$.ajax({
type:'POST',
url:'pageAjax2.php',
data:'name='+name,
success: function(data){
$('#content').html(data);
}
});
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
File pageAjax2.php :
<?php echo "Hello ".$_POST['name'];?>
Result:
thank you guys i just checked and pageAjax2.php had been set to get instead of using post so i just changed it to post and everything works now
thank you
The variable $pos has no value after that the Submit button I pressed.
<?php
$pos = $_GET['pos'];
echo "<br><br>pos = ".$pos;
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=us-ascii">
<title></title>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script type='text/javascript'>
$(window).load(function(){
var position = 128;
$('#submit').click(function(){
$.ajax({
type:"GET",
url: "ajax_test.php",
data: { pos : position },
success: function(){
//do stuff after the AJAX calls successfully completes
}
});
});
});
</script>
</head>
<body>
<br>
<button id="submit">Submit</button>
</body>
</html>
The web console in FF shows:
[12:41:55.027] GET http://somehost.com/ajax_test.php?pos=128 [HTTP/1.1 200 OK 187ms]
<?php
if($_SERVER['REQUEST_METHOD']=='GET' && isset($_GET['ajax'])){
$pos = $_GET['pos'];
echo $pos; exit;
}
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=us-ascii">
<title></title>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script type='text/javascript'>
$(window).load(function(){
var position = 128;
$('#submit').click(function(){
$.ajax({
type:"GET",
url: "test.php",
data: { pos : position , ajax:1},
success: function(response){
document.getElementById('response').innerHTML ='pos='+response
//do stuff after the AJAX calls successfully completes
}
});
});
});
</script>
</head>
<body>
<br>
<div id="response">pos=</div>
<button id="submit">Submit</button>
</body>
</html>
Your code is correct, your just not using the result of your Ajax GET Request.
Try this in your success function:
success: function(data) {
alert(data);
}
I don't see any errors in your code, except that you call your PHP script from your JavaScript code, and don't do anything with the output. The echo $pos output isn't used anywhere. Add this to your script:
success: function(result){
$('#YourResultDiv').html(result);
}
You can't retrieve your variable from the AJAX call.
Ajax is async and you can't modify a php code which is already computed.
But you can insert your data with jQuery with appendTo() for example
I am looking for a way to get a response in a form of a javascript alert after a form has been submitted using a php script. I guess ajax should do this but Im not an Ajax guy yet. A simple sample code would help a lot. Thanks for reading
In your PHP code after successfully saving/processing data, write/echo the following inside <body> tag. This will show an alert when rendered on client's browser.
<script language="javascript" type="text/javascript" >
alert('This is what an alert message looks like.');
</script>
If you want to venture into ajax and jquery - grab a copy of the jquery core and then do something like the following:
(Now with a full example. You will also need jquery.form.js plug in)
<html>
<body>
<script type="text/Javascript" src="jquery-1.2.4.min.js"></script>
<script type="text/Javascript" src="jquery.form.js"></script>
<script type="text/Javascript">
$(document).ready(function(){
$("#SUBMIT_BUTTON").click(function()
{
var options = {
url: 'processForm.php',
success: function(){
alert('success');
},
error: function() {
alert('failure');
}};
$('#MYFORM').ajaxSubmit(options);
return false;
}
)});
</script>
<form id="MYFORM" method="post">
<input type="text" name="testing">
<input type="button" value="click me" id="SUBMIT_BUTTON">
</form>
</body>
</html>