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
Related
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";?>
simple question for most of you but for me, being a newbie in php and jquery+ajax, not really: how to replace my index.html with some other html code, requested by ajax call from a php file?
index.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>Login page</h1>
<button id="btn_login">Login</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
</body>
</html>
javascript.js
$('#btn_login').click(
function(){
$.ajax({
url: "login.php",
type: "GET",
success: function(data){
// what to do here?
}
});
}
)
login.php
<?php
echo '<div>Succesful login</div>';
?>
TLDR: I want to replace the "Login page" + login button screen to "Succesful login" when clicked the button.
Thank you
you need to identify -or classify- your <h1> tag to be easily able to change
it's contents ,
<h1 id='title'>Login page</h1>
then , within your ajax call, if success you can change the content like that:
success: function(data){
// what to do here?
if (data) {
$('#title').html(data);
$('#btn_login').remove();
}
}
Take a look: ( https://www.w3schools.com/xml/tryit.asp?filename=tryajax_first : w3schools )
...
You can try this:
$('#btn_login').click(
function(){
$.ajax({
url: "login.php",
type: "GET",
success: function(data){
document.body.innerHTML = ""; // remove all content from the document
document.write(data); // write the returned div to the document
}
});
}
)
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 have this HTML structure :
<html>
<head>
</head>
<body>
<script src="view/backoffice/assets/plugins/jquery/jquery-1.11.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$.ajax({
url: "../controller/ctrl.test.php",
success:function(data){
alert(data);
});
});
});
</script>
</body>
</html>
and ../controller/ctrl.test.php actually just to output some date and time, so to simplify, it just like this :
<?php
echo '2016/04/22 13:00:00';
?>
my question is, how to get 2016/04/22 13:00:00 as feedback when ajax is finished? I tried to json_encode('2016/04/22 13:00:00') but also didn't show up as alert.
I also read this tutorial : http://www.w3schools.com/jquery/ajax_ajax.asp, it can fetch txt file without problem, but why in my case, I can't get date from PHP file?
what did I missed here? thank you
#Robert check by using network capturing feature of browser if data is actually coming in the response body of the response or not and the format of the data in response .
.Check console for syntax error.
Here a working example:
<html>
<head>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$.ajax({
url: "http://jsonplaceholder.typicode.com/users",
success:function(data){
alert(data);
}
});
});
</script>
</body>
</html>
I found the problem :
the problem is here success:function(data){ alert(data); }); this should be success:function(data){ alert(data); }, without );
your success function should be like this
success:function(data){
alert(data); }
not like this
success:function(data){
alert(data); });
I am fairly new to PHP but was looking at this tutorial. http://www.devirtuoso.com/2009/07/beginners-guide-to-using-ajax-with-jquery/
I want to test a similar concept to display data from my database on a page when someone submits data via a form.
eg there is a page where you choose what color shoes you want and a page with a leaderboard to see how many times each color has been chosen.
I have no problem submitting the form but don't no where to start to look to get the contents to display on the leaderboard using ajax. Can anyone point me in the right direction here please?
you should start with this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Ajax With Jquery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#txtValue').keyup(function(){
$.ajax({
url: '/ajax.php',
type: "POST",
data: "value="+$(this).val,
cache: true,
dataType: "JSON",
success: function(response){
$("#leader-board").append("you choose "+ $(this).val + "color : " +response.count + " times");
}
});
});
});
</script>
</head>
<body>
<label for="txtValue">Enter a value : </label>
<input type="text" name="txtValue" value="" id="txtValue">
<div id="leader-board"></div>
</body>
</html>
and you ajax.php file look like this
<?php
//if your data return result like this so you have to do this process
$data = array("count"=>5);
echo json_encode($data);
?>
You can send you form data and get your response in your div which have an id 'yourDivId' like below. You should to make a one more column 'countcolor' in your table . Increment it when a user request a particular color.
$.ajax({
url: base_path + "/folder/test.php",
data: "id="+id,
type: 'GET',
success: function (resp) { document.getElementById('yourDivId').innerHTML=resp;},
error: function(e){ alert('Error: '+e); }
});
After you submit the form, you need to get the pertinent data, echo it back (if you're using ajax, you want to echo is back using json_encode();), and then put it in the "leaderboard" div. e.g.
Action page for submitting to database
<?php
header('Content type: application/json');
// after you've submitted the data to the database, get the data for the leaderboard
$leaderboard_data = array();
$leaderboard_data = your_function_to_grab_data();
echo json_encode($leaderboard_data);
?>
On the page where you submit the form
$.ajax({
url: 'insert/path/to/action/here',
success: function(data) {
$("div#leaderboard-div").html(data)
}
});