Getting data in JavaScript from php - javascript

Specifically, I need to get data in html from a database. If there is a simple way to do that in JavaScript then just skip the next part ^^
I have successfully written the php code to retrieve the data from the database, which is something like this:
$host = (host)
$user = (user)
$db = (database)
$pw = (password)
$funct = $_GET["Function"];
switch ($funct) {
case "getName": {
$personid=$_GET["PersonID"];
$output = getName($host, $user, $pw, $db, $personid);
echo $output;
break;
}
}
Of course there are more values for $funct, but to keep things short I only wrote one and left out the function itself. I tested it by making a form with method="GET", and it correctly prints the name. So my actual question is how to pass the name onto a html document, where I want to list the names of certain people. I did research and found for example that I need to use "echo $output;", I had originally tried "return $output;" but that was not enough. My current js-code is something like this:
"use strict";
function getName(field_id, person_id) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("name"+field_id).innerHTML=this.responseText;
}
};
request.open("GET", "people.php");
request.setRequestHeader("Function", "getName");
request.setRequestHeader("PersonID", person_id);
request.send();
}
I originally tried fetch(), because it was recommended by javascript.info, but I didn't find many examples, so I scratched that. If i change it to ".innerHTML=this.responseText+this.status;" it just prints "200" onto the name field. There are no error messages.
It probably looks like I'm making it too complicated, but the code is supposed to do more stuff than what I shared, I'm just keeping it simple for you to understand.
I hope you can help me!

$_GET won’t give you the request headers, it will give query string parameters. You want to change your request to request.open("GET", "people.php?Function=getName&PersonId=" + person_id).

Related

Different ways to use local variables from HTML / Javascript in PHP

Recently I have been doing a lot of work in PHP and I have become familiar with how it works. I stand by what I have said before; That every problem has an endless amount of solutions. So that is what I am after, solutions that solve the same problem.
In this case, I want variables/references to values from localstorage:
localStorage.setItem("user", "bananaflakes55");
localStorage.getItem("user");
and directly include them in PHP files. Now I have found out that using echo have a variety of uses, for example:
echo '<script type="text/javascript"> window.location.replace("' . $refclinklogin . '"); </script>';
Granted that the value there are on serverside -> client side. In this case I want similar solutions that necessarily wont require me to create a GET or POST, with HTML elements like forms, that connect these.
To sum up, I want solutions that can bring values from local and session storage, to PHP. Bring forth some funky ideas, if possible. From what I have read it is a tricky one.
Even if i understand what you want, process sould be running from PHP to client rather than the reverse.
With this in mind, a light solution can be something like that :
window.addEventListener("load", function() {
let request = new XMLHttpRequest();
request.open("POST", 'localStorageToSession.php', true);
request.onload = function () {
let saveResponse = request.responseText;
// if you want a callback or use some script return
}
let data = "jsonLocalStorage=" + JSON.stringify(window.localStorage);
request.send(data);
}) ;
Once the page is loaded, send all localStorage parsed in json to a PHP treatment (here called localStorageToSession.php).
So you can convert localstorage as $_SESSION. Something like that :
$_SESSION['jsLocalStorage'] = json_decode($_POST['jsonLocalStorage'], true) ;
Then you can use $_SESSION['jsLocalStorage'] in your backend treatments. Don't forget to add session_start() on all your files.
You can save the xml request in a function and call once localStorage is updated).
Even if that solution works, i don't recommand it if you have to deal with safety informations like passwords or user special access.

How to store a MySQL value in a web page for later use

I am fetching just one cell value from a MySQL table with php and storing it in a div with an id.
I am then trying to use that div later on in JavaScript code.
I think the php/MySQL code is all correct but there is a problem using the div value in the later JavaScript code.
What is the best way to store a MySQL value in a web page for later use?
Currently I am storing the returned result as:
<div id="IsShift04Special"></div>
Using:
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("IsShift04Special").innerHTML=xhttp.responseText;
}
};
It all seemingly works well.
If I double click the 1 on the page in a browser and paste it into notepad it pastes just the 1.
There are no visible carriage returns or spaces anywhere near it.
But when I try to use the 1 value later on with:
var IsItASpecial = document.getElementById("IsShift04Special").innerHTML;
Then use that in an if statement, it is not working.
When I check the value of IsItASpecial (where it is declared and in the if statement), in the Chrome debugger it returns as:
IsItASpecial = "↵↵↵↵↵ 1 ↵↵↵"
The table currently has just one row.
The value is tinyint(1) with a value of 1.
This is the php query:
$result=mysqli_query($conn, "SELECT shift04_special FROM `shifts` WHERE `users_username`= '$users_username' AND `companies_short_name` = '$companies_short_name' AND `job_role_short_name` = '$job_role_short_name'");
$special_shift04 = mysqli_fetch_assoc($result);
echo $special_shift04['shift04_special'];
I get the same problem with:
while ($row = mysqli_fetch_array($result)) {
echo 'shift04_special';
}
And:
while ($row = mysqli_fetch_assoc($result)) {
echo $row["shift04_special"];
}
When I do a var dump as:
var_dump($special_shift04);
This part is returned:
["shift04_special"]=> string(1) "1" }
So it seems the problem is with my code for returning the div value and then storing it in a var.
You can save it directly in a JavaScript variable.
var id=<?php echo $row['shift04_special'] ?>
It's a typical typecast problem. MySQL storing data separately from PHP. So types in MySQL != types in PHP. Because of it you did string(1) "1" in your PHP var_dump() function.
So in your case, when you getting a value in Javascript environment you should cast this value to type that you need. In your case like this:
var IsItASpecial = parseInt(document.getElementById("IsShift04Special").innerHTML);
But. I don't recommend use JS like that in production. But for learning it's OK!
Have fun
You can try to store in localstorage in a JSON format,
// Fetch from server
localStorage.setItem("mysqlResponse", JSON.stringify(response));
Now whenever you need the value,
const data = JSON.parse(localStorage.getItem("mysqlResponse"));

Multi-threaded ajax call for PHP

I am trying to make a web app that will figure out if one or many e-commerce items are out of stock from their url(s) entered by user. These urls can be seperated by commas. Currently, I make ajax calls to my one of my PHP scripts for each url after spliting them by comma in a javascript loop. Below is the code for that:
function sendRequest(urls) {
if (urls.length == 0) {
return;
} else {
var A = urls.split(',');
for (var i = 0; i < A.length; i++) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var result_set = JSON.parse(this.responseText);
if (result_set.flag == 1) {
insertRow('stock-table', result_set.url, result_set.title); // It populates a table and insert row in it.
}
}
};
xmlhttp.open("GET", "scrapper.php?url=" + A[i], true);
xmlhttp.send();
}
}
}
The scrapper.php goes like:
<?php
function get_title($data)
{
$title = preg_match('/<title[^>]*>(.*?)<\/title>/ims', $data, $matches) ? $matches[1] : null;
return $title;
}
if (!isset($_SESSION['username'])) {
header("Location: index.php");
}
else if (isset($_GET["url"])) {
$url = $_GET["url"];
$title = null;
$result_set = null;
$flag = 0;
$file = fopen($url,"r");
if (!$file) {
echo "<p>Unable to open remote file.\n";
exit;
}
while (!feof($file)) {
$line = fgets($file, 1024);
if ($title == null){
$title = get_title($line);
}
if (preg_match('/<span[^>]*>Add to Cart/i',
$line, $matches, PREG_OFFSET_CAPTURE)) {
break;
}
if (preg_match('/Sold Out|Out of Stock/i',
$line, $matches, PREG_OFFSET_CAPTURE)) {
$flag = 1;
break;
}
}
fclose($file);
$result_set = array("flag" => $flag,
"url" => $url,
"title" => $title
);
echo json_encode($result_set);
}
?>
Now problem is: This program takes too much time even for two urls. Although, I moved from file_get_contents()(which was even slower) to here (ftp solution) . I have few confusion is my mind:
Considering my javascript, is it like sending one ajax call, waiting for its response and then second one?
If point one is not true, will scrapper.php be able to respond to second call from the loop? since it is busy with handeling first ajax call computation.
If point 2 is true, how can I make it multi-threaded such that ajax keeps sending the call until loop is finished and scrapper.php activates different threads for each call to then reply back to client once a thread completes its execution? (How can a make to pool of limted threads and grant new ajax response once a threads compltes its execution. Since, I have 200 urls. So, making 200 threads must not be an optimal solution)
Is it a good solution if I insert all urls (around 200) into the database, and then fetch all of them to make multi-threaded executions. In that case, how can i reply back multiple results from multiple threads against a single ajax call?
Please Help
No. XMLHttpRequest defaults to async, which means every new request with said async will execute in parallel.
Completely depends on how you're running PHP. In typical setups - and it's unlikely you're doing otherwise, your http server will wait for an available PHP worker thread from a thread pool, or execute a PHP binary directly. Either way, more than one PHP program can execute at once. (Think about how a regular website works. You need to be able to support more than one user at a time.)
N/A
If I'm understanding correctly, you just want to handle all requests in one Ajax call? Just send a list of all the URLs in the request, and loop server-side. Your current way of doing it is fine. Most likely the "slow" nature can be attributed to your connection to the remote URLs.
Some other notes:
I would validate the URL before passing it into fopen, especially considering the user can pass simply pass in a relative path and start reading your "private" files.
I'd switch back to file_get_contents. It's pretty much equivalent to fopen but does much of the work for you.
Not sure if intentional, but I'd use the newer const keyword instead of var for the XMLHttpRequest variable in the for loop's inner block. Currently, the var gets hoisted to the top of the function scope and you are simply overwriting it every iteration of the loop. If you want to add more logic to the XMLHttpRequest, you may find yourself prone to some unintentional behaviour.

Saving text with an hash mark (Javascript - PHP - MySQL)

I am writing simple AJAX functions to send comments to the server and save them in a mySQL database with php.
The following code seemed to work just fine for my purposes, basic but did his job, until i tried to put a hash symbol (#) in a comment.
Inserting this into the text "crashes" my functions, without saving the written text in the database and returning an empty div basically.
This is the ajax call:
function sendComment(n){
var xmlhttp = createAjax();
var text = document.getElementById("f"+n).value;
if (!validation(text))
return false;
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState==4 && xmlhttp.status==200){
appendComment(n, xmlhttp.responseText);
}
}
...
url = "comments.php?news="+n+"&text="+text;
xmlhttp.open("GET", url, true);
xmlhttp.send();
...
}
Where createAjax simply creates the xmlhttp object for every browser as standard, validation is a function that checks for many symbols like <,>,=,(,),| with a regular expression.
this is the php part:
function insertComment($text, $news){
$conn = dbConnect();
$user = $_SESSION["user"];
$text = nl2br(htmlentities($text));
$date = date("Y-m-d H:i:s");
$sql = "INSERT INTO comments(user, news, date, text) VALUES ('".$user."','".$news."','".$date."', '".$text."')";
mysql_query($sql) or die ("Errore in inserimento: ".sql_error());
echo writeSingleComment($user, $date, $text);
mysql_close(conn);
}
It just connects, saves the comment and returns the html code with echo, so that the javascript function can print it.
This works with any text apparently, but I can't get it to work with an hash, am I missing something?
Sidenotes, I could simply add the symbol to the validation regular expr., but my point is to "print" it, not just excluding it. Thanks in advance!
Sidenote 2, the javascript attaches the comment to a static element.
url = "comments.php?news="+n+"&text="+text;
You aren't escaping any of the data you are putting into your URL.
Some characters have special meaning, e.g. & separates query parts and # starts the fragment identifier.
You need to run your input through encodeURIComponent() before adding it to the URL.
url = "comments.php?news=" + encodeURIComponent(n) + "&text=" + encodeURIComponent(text);
Many characters (such as #) are not SQL safe and require escaping
At the very least you need to use
var toSend = escape(mystring);
this will not protect from attacks but will get you down the road.

Call different PHP functions from javascript

I realize that calling database from JavaScript file is not a good way. So I have two files:
client.js
server.php
server.php has multiple functions.
Depending upon a condition, I want to call different functions of server.php.
I know how to call server.php, but how do I call different functions in that file?
My current code looks like this:
function getphp () {
//document.write("test");
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// data is received. Do whatever.
}
}
xmlhttp.open("GET","server.php?",true);
xmlhttp.send();
};
What I want to do is something like (just pseudo-code. I need actual syntax):
xmlhttp.open("GET","server.php?functionA?params",true);
Well based on that premise you could devise something like this:
On a sample request like this:
xmlhttp.open("GET","server.php?action=save",true);
Then in PHP:
if(isset($_GET['action'])) {
$action = $_GET['action'];
switch($action) {
case 'save':
saveSomething();
break;
case 'get':
getSomething();
break;
default:
// i do not know what that request is, throw an exception, can also be
break;
}
}
Just do something like this, i hope this will work
xmlhttp.open("GET","server.php?function=functioName&paramsA=val1&param2=val2",true);
You will most likely need to create the mechanism yourself.
Say the URL will look like server.php?function=foo&param=value1&param=value2
On the server side you will now have to check whether a function with such a name exists, and if it does, call it with these parameters. Useful links on how to do it are http://php.net/manual/en/function.function-exists.php and http://php.net/manual/en/functions.variable-functions.php
Otherwise, if you don't want to have it like this, you can always go with if/switch and simply check that if $_GET["function"] is something, then call something etc.
You can use jQuery too. Much less code than pure js. I know pure js is faster but jQuery is simpler. In jQuery you can use the $.ajax() to send your request. It takes a json structured array like this:
$.ajax({
url: "example.php",
type: "POST",
data: some_var,
success: do_stuff_if_no_error_occurs(),
error: do_stuff_when_error_occurs()
});
Here's a dynamic way to solve this issue:
xmlhttp.open("GET","server.php?action=save",true);
PHP Code:
<?php
$action = isset($_GET['action']) ? $_GET['action'] : '';
if(!empty($action)){
// Check if it's a function
if(function_exists($action)){
// Get all the other $_GET parameters
$params = array();
if(isset($_GET) && sizeof($_GET) > 1){
foreach($_GET as $key => $value){
if($key != 'action'){
$params[] = $value;
}
}
}
call_user_func($action, $params);
}
}
?>
Keep in mind that you should send the parameters in the same order of function arguments.
Let's say:
xmlhttp.open("GET","server.php?action=save&username=test&password=mypass&product_id=12",true);
<?php
function save($username, $password, $product_id){
...
}
?>
You can't write the API Call that way:
xmlhttp.open("GET","server.php?action=save&password=mypass&username=test&product_id=12",true);
Keep in mind that it's really bad to send "function namespaces" along with the parameters to a back-end. You're exposing your back-end and without proper security measures, your website will be vulnerable against SQL Injection, dictionary attack, brute force attack (because you're not checking a hash or something), and it'll be accessible by almost anyone (you're using GET using of POST and anyone can do a dictionary attack to try to access several functions ... there's no privileges check) etc.
My recommendation is that you should use a stable PHP Framework like Yii Framework, or anything else.
Also avoid using GET when you're sending data to the back-end. Use POST instead.

Categories