cannot pass a javascript object to php via ajax - javascript

I've created a new array in javascript and I'm adding values to it indexes from a function an then passing the array to the ajaxCall function were I try to convert it to json and send it to a php file via ajax, but the variable json is allways empty. I've been reading a lot about how to send javascript objects json_encoded via ajax and looks like this is the way to do it, but obviously I haven't readed enought or there is something I've been missing. Anycase I'm newbie in javascript and any help would be apreciated.
function createArray()
{
var advancedFormVars = new Array();
advancedFormVars['checkbox1'] = document.getElementById('OfferID').value;
advancedFormVars['checkbox2'] =document.getElementById('offerName').value;
AjaxCall(advancedFormVars);
}
function AjaxCall(advancedFormVars){
var json = new Array();
json = JSON.stringify(advancedFormVars); //in debuger it shows me this as content of json variable--> [] but advancedFormVars is not empty
$.ajax({
url : 'AL_loadForm.php',
type : 'POST',
data : {
json : json
},
dataType:'json',
success : function(data) {
alert(data);
}
...

You are trying to use your array as a hash, so the values are not being set..
Instead of setting
var advancedFormVars = new Array();
Try setting
var advancedFormVars = {};
Example
JS:
var advancedFormVars = {};
advancedFormVars['checkbox1'] = 'valueA';
advancedFormVars['checkbox2'] = 'valueB';
var json = JSON.stringify(advancedFormVars);
console.log(json); //{"checkbox1":"valueA","checkbox2":"valueB"}
PHP
<?php
$json = '{"checkbox1":"valueA","checkbox2":"valueB"}';
$obj = json_decode($json);
var_dump($obj);
/*
object(stdClass)#1 (2) {
["checkbox1"]=>
string(6) "valueA"
["checkbox2"]=>
string(6) "valueB"
}
*/
?>

If all you have are two smaller arguments, I'd keep it simple and make an http get request. Encode your arguments if neccessary.
var url = "http://wherever.com/something.php?arg1=";
url += document.getElementById('OfferID').value;
url += "&arg2=" + document.getElementById('offerName').value;
httpGetAsync(url, returnMethod);
function httpGetAsync(theUrl, callback)
{
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
callback(xmlHttp.responseText);
}
xmlHttp.open("GET", theUrl, true); // true for asynchronous
xmlHttp.send(null);
}

Related

Output PHP already encode to json, and send to javascript to be json, not working

I'm do output with json_encode to sending to javascript, with this code.
<?php
include "Connection.php";
$syntax_query = "select * from product";
$thisExecuter = mysqli_query($conn, $syntax_query);
$result = array();
while($row = mysqli_fetch_assoc($thisExecuter)){
array_push(
$result,
array(
"id" => $row["product_id"],
"name" => $row["product_name"]
)
);
}
echo json_encode($result);
?>
so output show like this,
[{"id":"121353568","name":"Baju Casual - Black"},{"id":"556903232","name":"Tas LV - Red"},{"id":"795953280","name":"Sword - Wood"},{"id":"834032960","name":"Scooter - Iron Plate"}]
and code javascript like this
function showHint() {
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
var obj = this.responseText;
document.getElementById("txtHint").innerHTML = obj.id;
}
xmlhttp.open("GET", "Download.php");
xmlhttp.send();
}
so obj.id its not working, output show undifined.
I use ajax calls when I want to call a Php file and get a response from the same as below to try once that as I have shown. Before moving with Ajax you must need jquery to be imported into the calling file.
If Jquery is imported then ignore the steps
Here are steps,
Go to the link https://code.jquery.com/jquery-3.6.0.min.js copy whole content (use ctl+A to select whole content and ctl+C to copy)
Open a new file in the current project folder and paste the copied content (use ctl+V to paste) save it as 'jquery-3.6.0.min.js'
Import the js file in the HTML file in script tag as shown '
Now, this is the ajax example to call the PHP file and to get a response
function showHint() {
//since you have used GET method I have used here GET but You can use POST also here
$.ajax({
url: 'Download.php',
type: 'get',
//if any value you want to pass then uncomment below line
// data: {'name_to_pass':'value'},
//the variable can be accessed in the php file by 'name to pass' under $_GET['name_to_pass'] or $_POST['name_to_pass'] based on type
success: function(res)
{
// open DevTool console to see results
console.log(JSON.parse(res));
}
});
}
Hope this will help you out, thank you
Maybe you need a JSON.parse in the response, something like JSON.parse(this.responseText).
And also I can see the result is an Array so you will need to iterate obj
obj.forEach(item => {
document.getElement("txtHint").innerHTML = item.id;
});
you should define the response type as json
header('Content-Type: application/json; charset=utf-8');
echo json_encode($result);
function showHint() {
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
**var obj = this.responseText;**
document.getElementById("txtHint").innerHTML = obj.id;
}
xmlhttp.open("GET", "Download.php");
xmlhttp.send();
}
When you get the responseText it's text, not an object.
var obj = this.responseText; should be let obj = JSON.parse(this.responseText);
Then you can access obj.id as a property.

Using a javascript array to request data from a JSON file

I was wondering if it's possible to request data from a JSON file (For example: customers.name). But instead of that using an array containing the JSON object names and looping it. My code is below.
function load(url ,callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', url, true);
xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == 200) {
callback(xobj.responseText);
}
};
xobj.send(null);
}
load("klanten.json", function(response) {
var klanten = JSON.parse(response);
//Array containing JSON file object names.
var infArray = ['name', "address", "email", "phone", "place", "zip"];
//Calling said info using a for loop.
for(var i = 0; i < infArray.length; i++) {
console.log(klanten[i].infArray[i]);
//It not working for some reason.
}
});
I`d love some help with this. And in case what im asking is completely stupid, also let me know! Any help is welcome, thanks!
Change console.log(klanten[i].infArray[i]); to:
console.log(klanten[i][infArray[i]]);

how do I access the object the object i sent to the server file

//Sent an ajax http post request to a php file on the server, the post //request is a simple object.
var xhr = new XMLHttpRequest();
var person = {
"firstName" : "Adebowale",
"lastName" : "Johnson",
"ago" : 43
}
xhr.open("POST","phfile.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form- urlencoded");
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
var status = xhr.status;
if((status >= 200) && (status < 300) || (status === 304)) {
alert(xhr.responseText);
}
}
};
xhr.send(JSON.stringify(person));
//if I do alert(xhr.responseText);
//I get object{} from the browser.
//On the server, using php, how do I access the object, if I do echo or //print_r, I get the empty object --- object{} with none of the properties.
//As you can tell from the tone of my question, am still very new to all //these, am just trying to learn please.
//on my phfile.php, I set up the following php code...
<?php
print_r
//How do I access the object I sent to this file please
?>
I dont see the need for JSON.stringify(person) in your AJAX request, since all the keys of the Object are already in strings.
Since you are using POST method, you can directly access the object like
print_r ($_POST['person']);
You can read raw POST data using STDIN:
$post_data = fopen("php://input", "r");
$json = fgets($post_data);
$object = json_decode($json);
$firstName = $object->firstName;
$lastName = $object->lastName;
$age = $object->age;
You could simplify all of this by just passing the data as URL-encoded form fields:
xhr.send('firstName=' + encodeURIComponent(person.firstName) + '&lastName=' + encodeURIComponent(person.lastName) + '&ago=' + encodeURIComponent(person.ago);
Then you can just access them as $_POST['firstName'], etc. in PHP.

passing javascript value into php methods

var PId = 12;
var catId = 3;
var Param = 'productid='+PId+'&CatId='+catId;
var encriptedCode = '<?php echo $this->encrypt->encode( .... need to pass the Param .... );?>';
I am trying to pass the javascript value into php method, whatever i am trying it's not working. Any one help me to detect where i am wrong. using this code in time of ajax call
You would need to make an Ajax request and pass that information through using the GET request.
Something like this:
var PId = 12;
var catId = 3;
var Param = 'productid='+PId+'&CatId='+catId;
$.get( Param ); // makes the call to the PHP script
Then in your PHP file you can retrieve the data passed.
I guess that you need result of $this->encrypt->encode method to use in your JS file. So you need to retrieve it using XMLHttpRequest.
var PId = 12;
var catId = 3;
var Param = 'productid='+PId+'&CatId='+catId;
var req = new XMLHttpRequest();
var encriptedCode;
req.open('GET', 'path/to/your/file.php?' + Param, true);
req.onreadystatechange = function (aEvt) {
if (req.readyState == 4) {
if(req.status == 200) {
encriptedCode = req.responseText;
// Do some something with your encrypted code
} else {
// Handle error here
}
}
};
req.send(null);
and the PHP file should looks like here
<?php
// Load here libs for encryption
$productId = (int)$_GET['productid'];
$catId = (int)$_GET['CatId'];
echo $encryptObj->encrypt->encode($productId, $catId);
It should be as simple as:
encriptedCode = '<?php echo $this->encrypt->encode(?>Param<?php);?>';

How to store and fetch data from hash tables - javascript

I couldn't find anything on javascript but this might be clarified very quickly. I am working on a website where I have to retrieve data via http requests from a server. Because I need to make several requests and the data is constant what I want to do is make table with keys and values -> store those values in a file -> and then be able to retrieve those values. That way I have to read one file as apposed to fetching data via 30 http requests
General Idea :
Given: spell id = number (Ex. 45)
Output: name of spell = string (Ex. fire...)
Use this output to then fetch the url of the image of the spell (containing the spell name)
EDIT
Code :
// When I fetch the file i use (json data)
function getChampionImage(id) {
var champUrl = "https://na.api.pvp.net/api/lol/static-data/na/v1.2/champion/" +id +"/?api_key=....."
xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", champUrl, false );
xmlHttp.send( null );
var jsonText = xmlHttp.responseText;
var champData = JSON.parse(jsonText);
var champName = champData.key;
return "http://ddragon.leagueoflegends.com/cdn/" + versionNum + "/img/champion/"+champName+".png";
}
all you need to do is tack the response onto an object, keyed by input.
this is especially simple in sync IO because you don't have to worry about callback scope.
Since functions are objects in JS, you can just use the procedure itself as a namespace, which plays well with methods because you don't need an outside variable:
// When I fetch the file i use (json data)
function getChampionImage(id) {
var cached=getChampionImage["_"+id];
if(cached) return cached;
var champUrl = "https://na.api.pvp.net/api/lol/static-data/na/v1.2/champion/" +id +"/?api_key=....."
xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", champUrl, false );
xmlHttp.send( null );
var jsonText = xmlHttp.responseText;
var champData = JSON.parse(jsonText);
var champName = champData.key;
return getChampionImage["_"+id]="http://ddragon.leagueoflegends.com/cdn/" + versionNum + "/img/champion/"+champName+".png";
}
EDIT: to persist the url data between page visits, use localStorage as the hash object:
function getChampionImage(id) {
var cached=localStorage["_"+id];
if(cached) return cached;
var champUrl = "https://na.api.pvp.net/api/lol/static-data/na/v1.2/champion/" +id +"/?api_key=....."
xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", champUrl, false );
xmlHttp.send( null );
var jsonText = xmlHttp.responseText;
var champData = JSON.parse(jsonText);
var champName = champData.key;
return localStorage["_"+id]="http://ddragon.leagueoflegends.com/cdn/" + versionNum + "/img/champion/"+champName+".png";
}
note that with localStorage, you'll have to self-expire the cache if you make changes.

Categories