I am trying to get a HTML element to update from an ajax quire to a PHP file but it's not working.
My code is below
<html>
<head>
<script src="jquery-3.1.0.min.js"></script>
</head>
<body>
<script>
var json = (function () {
var json = null;
$.ajax({
url: "test.php",
dataType: "json", //the return type data is jsonn
success: function(data){ // <--- (data) is in json format
json = data.test;
$('#demo').text(json.test1);
}
});
return json;
})();
</script>
<p id="demo"></p>
</body>
</html>
PHP code
<?php
header("Content-Type: application/json");
$test = array();
$test['test1'] = '1';
$test['test2'] = '2';
$test['test3'] = '3';
echo json_encode($test);
//echo nothing after this //not even html
?>
can someone please help, thank you
Your php script sending a JSON object and you can access its property like this:
$.ajax({
url: "test.php",
dataType: "json", //the return type data is jsonn
success: function(data){ // <--- (data) is in json format
$('#demo').text(data.test1);
}
});
the Javascript is the problem. You should bind the function that makes the AJAX query to a DOM event, such as a button click.
<script>
$(document).ready(function(){
$("#submit").click(function(e){
e.preventDefault();
$.ajax({type: "POST",
url: "test.php",
dataType: "json",
data: { name: $("#name").val()},
success:function(data){
$("#demo").text(data.test1);
}
});
});
});
</script>
<input type="text" id="name" placeholder="Enter your name">
<button id="submit">Submit</button>
<p id="demo"></p>
On PHP side, you can read the input:
<?php
header("Content-Type: application/json");
$test = [
'test1'=>1, 'test2'=>2, 'test3'=>3, 'name'=>$_POST['name']
];
echo json_encode($test);
exit;
Related
for the PHP is just simple check:
All in the same page named **
page.php
if(isset($_POST['XYZ']){
echo "WORKING";
}
then for my HTML:
<h1 id='XYZ'>CLICK ME</h1>
now at the same page i'm trying to do the AJAX POST request like this
$('#XYZ').click(function(){
var XYZ = 'XYZ';
$.post('page.php',{
XYZ: XYZ
})
})
and the request didn't work, How do i just pass the $_POST data? I removed success function since i didn't think it is useful in this case.
What i want is when i click on the <h1> the echo appears.
try this:
var my_string = 'xyz';
$.ajax({
url: 'ajax.php',
type: 'post',
data: { "action":my_string},
dataType: "json",
success: function(response) {
if(response['state'] == 'ok'){
console.log("ok");
}
}
});
ajax.php
<?php echo $_POST['action']; ?>
<head>
<script>
var my_string = 'xyz';
$.ajax({
method: 'POST',
url: './giveposts',
dataType: "text",
contentType: "application/json; charset=utf-8",
data:my_string,
success: function(data) {
{
$("#test").html(data);
}
}
});
</head>
</script>
<body>
<div id="test>
/*echo
</div>
</body>
I am warking in phalcon framework, and i am trying to call controller's method to get simple string using jquery-ajax. When i placed my ajax call inside $(document).ready(function() ajax call worked, but when i placed same code inside $('#dugme').click(function() ajax call reported error. I am confused. Here is my view code:
<script type="text/javascript">
$(document).ready(function(){
//alert($("#nesto").val());
//atr = $(".klasa").attr("id");
//alert("Id je: " + atr)
$.ajax({
url: '<?php echo $this->url->get("xml/posalji");?>',
type: 'POST',
dataType: 'json',
success: function(data){
alert(data);
},
error: function(){
alert("Neuspjesan JSON zahtjev!");
}
});
$('#dugme').click(function(){
$.ajax({
url: '<?php echo $this->url->get("xml/posalji");?>',
type: 'POST',
dataType: 'json',
success: function(data){
alert(data);
},
error: function(){
alert("Neuspjesan JSON zahtjev!");
}
});
}) ;
});
</script>
<h2>Basic example</h2>
<?php echo Tag::form("xml/pretraga"); ?>
<p>
<label for="name">Title</label>
<?php $opt = array('title', 'id'=>'nesto', 'size'=>'10');
$buttopt = array('Show', 'id'=>'dugme','class'=>'klasa');
?>
<?php echo Tag::textField($opt) ?>
</p>
<p>
<?php echo Tag::SubmitButton($buttopt) ?>
</p>
</form>
and here is my action code:
public function posaljiAction(){
$this->view->disable();
$data = "My name is Nedimo";
echo json_encode($data);
}
Please, can anyone tell me what is wrong in my code.
I'm trying to get data via ajax then send it through a form. However it doesn't seem to be working. Any ideas what im doing wrong?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form method="get" action="test.php">
<input id="myvar" type="hidden" name="albumid" />
<button type="submit" id="btnsubmit">Submit</button>
</form>
<script type="text/javascript">
$('form').submit(function() {
$.ajax({
url: "newAlbum.php",
success: function(data){
var album = data;
$('#myvar').val(album);
}
});
});
</script>
newAlbum.php
<?PHP echo '11'; ?>
test.php
<?php echo $_GET["albumid"]; ?>
Okay try adding as follows:
$('form').submit(function() {
$.ajax({
url: "newAlbum.php",
async:false,
success: function(data){
var album = data;
$('#myvar').val(album);
}
});
});
As someone else pointed out - you need to add the data parameter. But I would also use $(this).serialize(), since that will fetch all form input elements.
<script type="text/javascript">
$('form').submit(function() {
$.ajax({
url: "newAlbum.php",
data: $(this).serialize(),
success: function(data){
var album = data;
$('#myvar').val(album);
},
error : function(data) {
console.log(data);
}
});
});
</script>
Try receiving the data as JSON
$.getJSON()
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
var content = $('#content').html();
var data = {"content":content};
$.ajax({
type: "POST",
dataType: "json",
url: "ajax.php",
data: {content:content},
success function (data) {
alert('Hello!');
}
});
});
});
</script>
<div id="content"><?php echo $content; ?></div>
ajax.php
echo json_encode($_POST['content']); ?>
Nothing happens... WhatI really want to achieve is to get that alert box and get the return data, but I am lost since I don't get any errors or nothing.
You miss " : " after success
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
var content = $('#content').html();
var data = {"content":content};
$.ajax({
type: "POST",
dataType: "json",
url: "ajax.php",
data: {content:content},
success: function (data) {
alert('Hello!');
}
});
});
});
</script>
<div id="content"><?php echo $content; ?></div>
As #sofl said, if you change it to success:function (data) { it will work!
Just remember that the $("a") from $("a").click(function() { called when click in a link tag like <a href"">.
If you are using an input ou button with a class="a" you should change the code to $(".a").click(function() {
(just add a . before a)
PS: If you're using a link, you should set the href="" to href="#" to work.
I tried to post values from the link title attribute with jquery ajax json post. Here is my code. where is the problem? Why doesn't it work?
main.php
<script type="text/javascript">
$(document).ready(function(){
$(".link").click(function(){
var aa = $(this).attr('title');
$.ajax({
url: "data.php",
dataType: "json",
data: "number1="+aa,
success: function(json){
$("#result").html(json.number1);
}
});
});
});
</script>
A
B
O
<div id="result"></div>
data.php
<?php
$number1 = $_GET['number1'];
echo json_encode($number1);
?>
Try this:
<script type="text/javascript">
$(document).ready(function(){
$(".link").click(function(){
var aa = $(this).attr('title');
$.ajax({
url: "data.php",
dataType: "json",
data: {"number1": aa},
success: function(json){
$("#result").html(json.number1);
}
});
});
});
</script>
A
B
O
<div id="result"></div>
<?php
$number1 = $_GET['number1'];
echo json_encode(array('number1' =>$number1));
?>