jQuery AJAX POST method not working - javascript

I am trying to execute the AJAX operation. the call is working fine but the problem I am having is that I am getting an empty string as a response. There is no error in the console. all I get is an empty string. Even when I change the dataType to JSON, I still get the same response.
JavaScript Code:
$.ajax({
url: "data/saveCart.php",
method: "POST",
data: {
cartItem:item
},
dataType: "text",
success: function(data){
console.log(data);
}
});
PHP code:
if(isset($_POST['cartItem'])) {
echo "AJAX successful";
} else {
echo "AJAX failed";
}

It seems like it was caused by not stringifying your data.
var item = {
toothbrush: {
price: 1
}
};
$.ajax({
url: "data/saveCart.php",
method: "POST",
data: {
cartItem: JSON.stringify( item )
},
dataType: "text",
success: function(data){
console.log(data);
}
});

Related

Undefined index in post method of JSON object sent by jQuery AJAX

I've tried almost all suggestions but it doesn't work. My ids are working properly in the JavaScript function when I alert my array using arr['id']. However, when I try $_POST['id'] on a different PHP file (I've used AJAX and specified the URL) is gives me an error.
scriptfile.php:
<script>
function detailsmodal(cid, pid) {
var arr = { "cid": cid, "pid": pid };
jQuery.ajax({
url: '/frontend/include/detailsmodal.php',
method: "post",
data: arr,
success: function(data) {
jQuery('body').append(data);
jQuery('#details-modal').modal('toggle');
},
error: function() {
alert("something went wrong");
}
});
}
detailsmodal.php
<?php
echo $_POST['cid'];
?>
You could try sending your data as json like this:
$.ajax({
type: "POST",
url: "/frontend/include/detailsmodal.php",
contentType: "application/json",
dataType: "json",
data: JSON.stringify({ cid: cid, pid: pid }),
success: function(data) {
jQuery('body').append(data);
jQuery('#details-modal').modal('toggle');
},
error: function() {
alert("something went wrong");
}
});
For the decoding you could use javascript JSON.parse
var myObj = JSON.parse(this.responseText);
or
$data = json_decode(file_get_contents('php://input'), true);
print_r($data);
echo $data["cid"];

how to execute a javascript function returned from ajax response

I have a function which i want to execute when ajax makes a successful request but it doesn't execute here my jquery part
$.ajax({
type: "POST",
url: "https://www.example.com/create_chat.php",
data: dataString,
beforeSend: function()
{
$("#loading_indicator").show();
},
success: function(response)
{
$(".example").html(response);
}
});
here is the response from php file
<script>start_chat(); alert("testing");</script>
i tried adding this also
$(".example").find("script").each(function(i) {
eval($(this).text());
});
but nothing works
Your response from create_chat could indicate which function will be used. For example
$.ajax({
type: "POST",
url: "https://www.example.com/create_chat.php",
data: {
dataString: dataString
},
beforeSend: function()
{
$("#loading_indicator").show();
},
success: function(response) // response could be 1,2,3,4.. etc
{
if(response==1) {
start_chat();
}
if(response==2) {
stop_chat();
}
if(response==3) {
change_chat_room();
}
...
$(".example").html(response);
}
});
While there are work arounds, you should never be executing the response of an Ajax call directly.
"Scripts in the resulting document tree will not be executed,
resources referenced will not be loaded and no associated XSLT will be
applied."
http://www.w3.org/TR/XMLHttpRequest/#document-response-entity-body
Best practice is to respond with data, typically in the form of JSON, JSONP or HTML.
Try This,
$.ajax({
type: "POST",
data: {
'dataString': dataString
},
url: 'https://www.example.com/create_chat.php',
success: function(data) {
start_chat();
alert('Success');
},
error: function(data) {
alert('failed');
}
});

How to get DELETE request parameters

This is how I want to delete a record using jquery ajax
deleteFile: function(obj) {
$.ajax({
type: 'delete',
dataType: 'json',
url: 'service/lead.php?a=deleteFile',
data: {id: $(obj).attr('data-lf-id')}
}).done(function(response) {
console.log("done");
}).fail(function(error) {
});
}
This works but how am I suppsed to get the id value on the lead.php page? This is what I am currently doing but it doesn't capture the id value.
//service/lead.php
if ($_SERVER['REQUEST_METHOD'] == "DELETE") {
if ($_GET['a'] == 'deleteFile') {
echo json_encode($lead->deleteLeadFile($_REQUEST['id']));
}
}
I would suggest changing your Ajax type to either 'POST' or 'GET". You can then use the appropriate $_GET or $_POST variable to retrieve your id.
deleteFile: function(obj) {
$.ajax({
type: 'POST',
dataType: 'json',
url: 'service/lead.php?a=deleteFile',
data: {id: $(obj).attr('data-lf-id')}
}).done(function(response) {
console.log("done");
}).fail(function(error) {
});
}
//service/lead.php
if ($_GET['a'] == 'deleteFile') {
echo json_encode($lead->deleteLeadFile($_POST['id']));
}
file_get_contents(“php://input”)
This always gives you raw request data - you have to parse it [with parse_str if you send urlencoded data, with json_decode if you send JSON].
But you should keep it RESTful and not RPC-like, and issue a delete over /resource/:id.

How to call json object from AJAX?

Here is my script:
$.ajax({
type: "Get",
url: "Sample.js",
datatype: 'json',
data: JSON.stringify({ key:key }),
success: function (data) {
var sample = data.name;
$("#html").html(sample);
},
error: function () {
alert("Error");
}
});
This is my Sample.js file:
{ "name": "user" }
When I run this code I get a blank screen. This is my script using getJSON():
$.getJSON("Sample.js", function (data) {
var sample = data.name;
$("#html").html(sample);
})
This produces "user" perfectly. What is the problem with $.ajax code?
In the getJSON version your don't send any data. Could this be the reason why that works? To me it looks like this could be sth. on the server side that delivers an empty JSON object when you pass the key parameter.
As the jQuery documentation states:
$.ajax({
dataType: "json",
url: url,
data: data,
success: success
});
Try modifying the dataType param.
change your datatype to dataType. Its case sensitive. Refer http://api.jquery.com/jQuery.getJSON/
Remove JSON.Stringify and change Get to GET
$.ajax(
{ type: "GET",
url: "Sample.js",
dataType: "json",
data: {key:key },
success: function (data)
{ var sample = data.name; $("#html").html(sample); },
error: function () { alert("Error"); }}
);

Jquery set HTML via ajax

I have the following span:
<span class='username'> </span>
to populate this i have to get a value from PHP therefor i use Ajax:
$('.username').html(getUsername());
function getUsername(){
$.ajax({
type: 'POST',
url: myBaseUrl + 'Profiles/ajax_getUsername',
dataType: 'json',
data: {
},
success: function(data){
document.write(data);
}
})
}
Now when i debug i see that the returned data (data) is the correct value but the html between the span tags stay the same.
What am i doing wrong?
Little update
I have tried the following:
function getUsername(){
$.ajax({
type: 'POST',
url: myBaseUrl + 'Profiles/ajax_getUsername',
dataType: 'json',
data: {
},
success: function(data){
$('.username').html('RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRr');
}
})
}
getUsername();
Still there is no html between the tags (no text) but when i look at the console the method is completed and has been executed.
Answer to the little update
The error was in my Ajax function i forgot to print the actual response! Thank you for all of your answers, for those of you who are searching for this question here is my Ajax function:
public function ajax_getUsername(){
if ($this->RequestHandler->isAjax())
{
$this->autoLayout = false;
$this->autoRender = false;
$this->layout = 'ajax';
}
print json_encode($this->currentClient['username']);
}
Do note that i am using CakePHP which is why there are some buildin methods. All in all just remember print json_encode($this->currentClient['username']);
The logic flow of your code is not quite correct. An asynchronous function cannot return anything as execution will have moved to the next statement by the time the response is received. Instead, all processing required on the response must be done in the success handler. Try this:
function getUsername() {
$.ajax({
type: 'POST',
url: myBaseUrl + 'Profiles/ajax_getUsername',
dataType: 'json',
data: { },
success: function(data){
$('.username').html(data); // update the HTML here
}
})
}
getUsername();
Replace with this
success: function(data){
$('.username').text(data);
}
In success method you should use something like this:
$(".username").text(data);
You should set the html in callback
function getUsername() {
$.ajax({
type: 'POST',
url: myBaseUrl + 'Profiles/ajax_getUsername',
dataType: 'json',
data: {
},
success: function(data){
$('.username').html(data);
}
})
}
Add a return statement for the function getUsername
var result = "";
$('.username').html(getUsername());
function getUsername(){
$.ajax({
type: 'POST',
url: myBaseUrl + 'Profiles/ajax_getUsername',
dataType: 'json',
data: {
},
success: function(data){
document.write(data);
result = data;
}
})
return result;
}
You can use .load()
Api docs: http://api.jquery.com/load/
In your case:
$('.username').load(myBaseUrl + 'Profiles/ajax_getUsername',
{param1: value1, param2: value2});

Categories