javascript – Im trying to create a webapp that utilize dictionary api + also save the data to a database after onsubmit, I’m having issues being able to do that

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

Leave a Comment