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); });
Related
EDIT: I have changed the AJAX code to what I am now using and I have also included JQuery in my code
I've read up on as much AJAX as I can and I am flat out failing!
My HTML form looks like this:
<form action="match_details.php" method="post" id="match_details">
....
<button type="submit" form="match_details" name="match_details" class="w3-button w3-block w3-mam w3-section" title="Update Match Postcode">Update</button>
</form>
From Stack I've managed to get this AJAX:
<script type="text/javascript">
$(function(){
$('button[type=submit]').click(function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: "match_details.php",
data: $("#match_details").serialize(),
beforeSend: function(){
$('#result');
},
success: function(data){
$('#result').html(data);
}
});
});
});
</script>
I've tried changing it from button to input and back again but nothing seems to change. The form still submits but it ignores the AJAX and the page refreshes.
You need to prevent the JS from submitting the form, and you're using the wrong form ID. Also, judging by the comments, you need to include jquery.
In the head of your HTML file, between <head> and </head> or just before the closing </body> tag, you can use the following:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
The following code may help you (though it's advised to not query the same page as your ajax request emits from):
<script type="text/javascript">
$(function(){
$('button[type=submit]').click(function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: "match_details.php",
data: $("#match_details").serialize(),
beforeSend: function(){
$('#result');
},
success: function(data){
$('#result').html(data);
}
});
});
});
</script>
This very simple AJAX-Call does not work on my localhost. I do have a Windows 10 Machine with XAMPP running. I tracked the packages, and the AJAX-Reqauest is not even sent to handle.php. What am i doing wrong here?
ajaxTest.php
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js">
$(document).ready(function()
{
$.ajax(
{
type: 'post',
url: 'inc/handle.php',
success: function(data)
{
alert("Done!");
}
});
});
</script>
</head>
</html>
handle.php
<?php
echo "Test!";
?>
The problem is: include jquery on script tag and your code into another script tag
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function()
{
$.ajax(
{
type: 'post',
url: 'inc/handle.php',
success: function(data)
{
alert("Done!");
}
});
});
</script>
</head>
</html>
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 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
This question already has answers here:
jQuery Ajax POST example with PHP
(17 answers)
Closed 7 years ago.
To make this understandable I made an sample code because my actual code is much bigger.
Basically what I want to accomplish is to run my PHP script that edits an XML file using ajax. This is because I need to do this inside a javascript in my real project.
This is what I have so far:
the .php file containing the ajax function:
<!DOCTYPE html>
<html>
<head>
<script>
function editXMLDoc()
{
$.ajax({
url: "sensors.php",
context: document.body
}).done(function() {
$( this ).addClass( "done" );
});
}
</script>
</head>
<body>
<button type="button" onclick="editXMLDoc()">Endre XML</button>
</body>
</html>
And here is the php script writing to xml:
<?php
include 'sensor.php';
$b=new sensor();
$arr=$b->load('sensor.xml');
for($i=0,$ms=count($arr);$i<$ms;$i++)
{
if($arr[$i]['fields']['status']=='1')
{
$arr[$i]['fields']['status']='0';
}else{
$arr[$i]['fields']['status']='1';
}
}
echo "Completed<br/>";
//3. save array to xml
$b->save('sensor.xml',$arr);
?>
I know the script is working so I am pretty sure the prob is the connection between the ajax function and the php script.
Can anyone help me out?
Try this code... actually you did not attached jQuery library.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
var resp = $("#response");
$.ajax({
type: "POST", // Method type GET/POST
url: "sensors.php", //Ajax Action url
data: {},
// Before call ajax you can do activity like please wait message
beforeSend: function(xhr){
resp.html("Please wait...");
},
//Will call if method not exists or any error inside php file
error: function(qXHR, textStatus, errorThrow){
resp.html("There are an error");
},
success: function(data, textStatus, jqXHR){
resp.html(data);
}
});
});
</script>
</head>
<body>
<div id="response"></div>
</body>
</html>
Use AJAX like this:
<script type="text/javascript">
jQuery(document).ready(function($){
$('.rt11').click(function(){
$.ajax({
type: "POST", // Method type GET/POST
url: "sensors.php", //Ajax Action url
data: {yourKey: "yourValue", yourKey1: "another value"},
// Before call ajax you can do activity like please wait message
beforeSend: function(xhr){
console.log("Please wait...");
},
//Will call if method not exists or any error inside php file
error: function(qXHR, textStatus, errorThrow){
console.log("There are an error");
},
success: function(data, textStatus, jqXHR){
console.log(data);
}
});
});
});
</script>
I think there is no problem in code but sometime in large code the min.js file did not include properly. please try the below code. there is no need to change sensors.php file.
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
$('.rt11').click(function(){
$.ajax({
url: "sensors.php",
context: document.body
}).done(function(html) {
$( this ).addClass( "done" );
});
});
});
</script>
</head>
<body>
<button type="button" class="rt11">Endre XML</button>
</body>
</html>
HTML:
<button type="button" id="idButton">Endre XML</button>
JS:
$("#idButton").click(function(){
$.ajax({
url: 'sensors.php',
dataType: "xml", //if it returns a xml file
success: function (data) {
// everything is ok
alert(data)
},
error: function (xhr, status, error) {
// Something went wrong
if (xhr.status > 0) alert('Error: ' + status);
}
});
})
Try this i think you missed to include the jQuery library file.Get post data to your php file after ajax call.
<!DOCTYPE html>
<html>
<head>
//include the jQuery library file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function editXMLDoc()
{
var myvalue='123';
$.ajax({
url: "sensors.php",
context: document.body,
data: {myvalue:myvalue},
}).done(function() {
$( this ).addClass( "done" );
});
}
</script>
</head>
<body>
<button type="button" onclick="editXMLDoc()">Endre XML</button>
</body>
</html>