I’m trying to create a web app that utilizes dictionary API + also saves the data to a database using MySQL after submitting using javascript, I’m having issues displaying the result while asynchronously post to the datable I’ve created multiple methods options and I’m still having issues
METHOD 1
<html>
<head>
<title>Webapp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<DOCTYPE html>
<script>
function getWord() {
var word = document.getElementById("word").value;
var url = "https://api.dictionaryapi.dev/api/v2/entries/en/" + word;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(this.responseText);
var output = "";
for (var i = 0; i < response.length; i++) {
output += "<h2>" + response[i].word + "</h2>";
output += "<p>" + response[i].phonetics[0].text + "</p>";
output += "<p>" + response[i].meanings[0].definitions[0].definition + "</p>";
output += "<p>" + response[i].meanings[0].definitions[0].example + "</p>";
}
document.getElementById("result").innerHTML = output;
}
$output = $_POST['output'];
$sql = "INSERT INTO `words` (`word`) VALUES ('$output')";
if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$.ajax({
url: "post.php" + word,
type: "GET",
headers: {
"Accept": "application/json",
"Webapp.html": "",
"word": ""
},
success: function (response) {
var output = "";
for (var i in response.results) {
output += "<h2>" + response.results[i].word + "</h2>";
output += "<p>" + response.results[i].lexicalEntries[0].pronunciations[0].phoneticSpelling + "</p>";
output += "<p>" + response.results[i].lexicalEntries[0].entries[0].senses[0].definitions[0] + "</p>";
output += "<p>" + response.results[i].lexicalEntries[0].entries[0].senses[0].examples[0].text + "</p>";
}
document.getElementById("result").innerHTML = output;
}
});
};
xhttp.open("GET", url, true);
xhttp.send();
}
function submitWordToDatabase() {
var word = document.getElementById("word").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("word").innerHTML = this.responseText;
}
};
xhttp.open("POST", "post.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("word="+word);
}
</script>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Dictionary API</h1>
<form>
<div class="form-group">
<label for="word">Word Finder</label>
<input type="text" class="form-control" id="word" placeholder="Enter word">
</div>
<button type="button" class="btn btn-primary" onclick="getWord()">Submit</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="result"></div>
</div>
</div>
METHOD 2
<html>
<head>
<title>Webapp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<DOCTYPE html>
<script>
function getWord() {
var word = document.getElementById("word").value;
var url = "https://api.dictionaryapi.dev/api/v2/entries/en/" + word;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(this.responseText);
var output = "";
for (var i = 0; i < response.length; i++) {
output += "<h2>" + response[i].word + "</h2>";
output += "<p>" + response[i].phonetics[0].text + "</p>";
output += "<p>" + response[i].meanings[0].definitions[0].definition + "</p>";
output += "<p>" + response[i].meanings[0].definitions[0].example + "</p>";
}
document.getElementById("result").innerHTML = output;
var word = response[i].word;
var sql = "INSERT INTO words (word) VALUES ('" + word + "')";
connection.query(sql, function(err, result) {
if (err) throw err;
console.log("1 record inserted");
});
}
};
<?php
$word = $_POST['word'];
$meaning = $_POST['meaning'];
$example = $_POST['example'];
$file = fopen("word.txt", "w");
fwrite($file, $word);
fwrite($file, $meaning);
fwrite($file, $example);
fclose($file);
?>
}
};
}
};
xhttp.open("GET", url, true);
xhttp.send();
</script>
}
=
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Dictionary API</h1>
<form>
<div class="form-group">
<label for="word">Word Finder</label>
<input type="text" class="form-control" id="word" placeholder="Enter word">
</div>
<button type="button" class="btn btn-primary" onclick="getWord()">Submit</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="result"></div>
</div>
</div>
<?php
function OpenCon()
{
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "root";
$db = "Webapp.html";
$conn = new mysqli($dbhost, $dbuser, $dbpass,$db) or die("Connect failed: %sn". $conn -> error);
return $conn;
}
function CloseCon($conn)
{
$conn -> close();
}
?>
CREATE TABLE IF NOT EXISTS `Webapp.html`.`users` (
`id` INT NOT NULL AUTO_INCREMENT,
`word` VARCHAR(45) NULL,
PRIMARY KEY (`id`))
ENGINE = InnoDB;
I understand I need to have a text file open if I’d like to be able to write on the file, but I want to be able to still submit to the file please… help I don’t know if I can add two functions after the submission of the file, which would display to the console and post to my database