Create a simple web page with two(2) AJAX interactions with a mySQL Database AJAX 1 should...

Create a simple web page with two(2) AJAX interactions with a mySQL Database
1. AJAX 1 should return HTML content for use on the page
2. AJAX 2 should return JSON content for use on the page
3. Use a JS library, such as jQuery, to ensure the AJAX works on all browsers

Solutions

Expert Solution

Hi,

Please find the below pages which will show the ajax with the response of HTML and ajax with the response of JSON file data.

Below is the Main Page which I have created:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="https://kendo.cdn.telerik.com/2020.3.915/styles/kendo.common.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.3.915/js/kendo.all.min.js"></script>
    <script>
        $(document).ready(function () {
            //To Clear the HTML content
            $("#btnClear").click(function () {
                $("#ParentTag").html("");              

            });

            //Load the content of HTML from index.html page
            $("#btnGetData").click(function () {
                $.get("/index.html", function (data, status) {

                    //all the HTML content will available at this point
                    $("#ParentTag").html(data);
                    
                });
            });

            //Get the result from json file - Student.json
            $("#btnGetJSON").click(function (event) {
                $.getJSON('Student.json', function (jd) {
                    //fetch stud number
                    $('#studenPreNu').html(jd.studentRefNumber);

                    var testResult = [];
                    testResult = jd.testResult;

                    //Update student difficulty level to * signs
                    for (var i = 0; i < testResult.length; i++) {
                        var domElement = testResult[i];

                        if (domElement.difficultyLevel == 1) {
                            domElement.difficultyLevel = "*";
                        }

                        if (domElement.difficultyLevel == 2) {
                            domElement.difficultyLevel = "**";
                        }

                        if (domElement.difficultyLevel == 3) {
                            domElement.difficultyLevel = "***";
                        }

                        if (domElement.difficultyLevel == 4) {
                            domElement.difficultyLevel = "****";
                        }

                        if (domElement.difficultyLevel == 5) {
                            domElement.difficultyLevel = "*****";
                        }

                        if (domElement.correctAnswer == domElement.yourAnswer) {
                            domElement.yourAnswer = "Correct";
                        }
                    }

                    //Convert div into kendo grid
                    $("#dvTable").kendoGrid({
                        dataSource: testResult,
                        columns:
                            [
                                {
                                    field: "questionNumber",
                                    title: "QuestionNumber"
                                },
                                {
                                    field: "content",
                                    title: "Content"
                                    //  template: '#= kendo.toString(sales, "N0") #'
                                }
                                ,
                                {
                                    field: "topic",
                                    title: "Topic"
                                    //  template: '#= kendo.toString(sales, "N0") #'
                                }
                                ,
                                {
                                    field: "correctAnswer",
                                    title: "CorrectAnswer"
                                    //  template: '#= kendo.toString(sales, "N0") #'
                                }
                                ,
                                {
                                    field: "yourAnswer",
                                    title: "YourAnswer"
                                    //  template: '#= kendo.toString(sales, "N0") #'
                                },
                                {
                                    field: "difficultyLevel",
                                    title: "DifficultyLevel"
                                }
                            ]
                    });

                    var corectAns = $(".k-grid-content tr td").closest("[data-field='yourAnswer']");
                    for (var i = 0; i < corectAns.length; i++) {
                        //here we will show the correct image for which user who gives correct answer
                        if ($(corectAns[i]).html() == "Correct") {
                            $(corectAns[i]).html(("<span class='glyphicon glyphicon-ok'></span>"));
                        } else {

                            //Here is the code which will show the color to grey
                            var questionNumber = $(".k-grid-content tr td").closest("[data-field='questionNumber']");
                            $(questionNumber[i]).css("background-color", "grey");
                            //questionNumber
                        }

                    }


                });
            });
        });
    </script>
</head>
<body>

    <button id="btnGetData">Send an HTTP GET request to a page and get the HTML result back</button>

    <button id="btnClear">Clear</button>

    <button id="btnGetJSON">Send an HTTP GET request to a JSON data</button>

    <div id="ParentTag"></div>

    <div id="sudentDetails">
        <h1> Test Result. Student Preference Number. <span id="studenPreNu"></span></h1>
        <div id="dvTable"></div>
    </div>
</body>
</html>

In the above file, we have used index.html and Student.json file. as below:

Index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>

    
</head>
<body>
    <div><h1><span id="headerText">ICE01:</span></h1></div>
    <br />
    <strong>Ajax/Javascript is working</strong>
</body>
</html>

The above index.html page content will be place in the our main page using ajax

Student.json

{
  "studentRefNumber": "BGX8P21R5",
  "testResult": [
    {
      "questionNumber": 1,
      "content": "Read a table to solve a problem",
      "topic": "Chance & Data",
      "correctAnswer": "C",
      "yourAnswer": "C",
      "difficultyLevel": 1
    },
    {
      "questionNumber": 2,
      "content": "Calculate the perimeter of a shape",
      "topic": "Measures & Units",
      "correctAnswer": "B",
      "yourAnswer": "B",
      "difficultyLevel": 2
    },
    {
      "questionNumber": 3,
      "content": "Solve a word problem involving speed of a vehicle",
      "topic": "Algebra & Patterns",
      "correctAnswer": "C",
      "yourAnswer": "A",
      "difficultyLevel": 2
    },
    {
      "questionNumber": 4,
      "content": "Solve a word problem involving multiple additions",
      "topic": "Algebra & Patterns",
      "correctAnswer": "C",
      "yourAnswer": "C",
      "difficultyLevel": 3
    },
    {
      "questionNumber": 5,
      "content": "Identify a shape reflected about a given axis",
      "topic": "Space & Geometry",
      "correctAnswer": "A",
      "yourAnswer": "D",
      "difficultyLevel": 5
    },
    {
      "questionNumber": 6,
      "content": "Solve a complex problem involving time",
      "topic": "Measures & Units",
      "correctAnswer": "D",
      "yourAnswer": "A",
      "difficultyLevel": 3
    },
    {
      "questionNumber": 7,
      "content": "Solve a complex problem involving fractions",
      "topic": "Number & Arithmetic",
      "correctAnswer": "B",
      "yourAnswer": "B",
      "difficultyLevel": 4
    },
    {
      "questionNumber": 8,
      "content": "Solve a complex equation involving two variables",
      "topic": "Number & Arithmetic",
      "correctAnswer": "C",
      "yourAnswer": "B",
      "difficultyLevel": 5
    },
    {
      "questionNumber": 9,
      "content": "Identify an object shown from a different position",
      "topic": "Space & Geometry",
      "correctAnswer": "B",
      "yourAnswer": "B",
      "difficultyLevel": 4
    },
    {
      "questionNumber": 10,
      "content": "Translate data table into a graph",
      "topic": "Chance & Data",
      "correctAnswer": "A",
      "yourAnswer": "A",
      "difficultyLevel": 1
    }
  ]
}

This JSON data will be show in the Kendo Grid Content in out main page.

Let's see the output:

When you load our page - AjaxWithJSON.html in the browser, it will show

Then I am going to click on the First Button - Send an HTTP GET request to a page and get the HTML result back

You can see that content of index.html page shown in the above page.

Lets click on the button - Send an HTTP GET request to a JSON data

When you click on the Clear button then it will clear the HTML Content.

Thanks.

venereology answered 1 year ago

Next > < Previous

Related Solutions

Create a web page that contains a simple math test. The page should have the following...

Create a web page that contains a simple math test. The page should have the following arithmetic problems. Add a button under each problem which, when clicked, will display a prompt for the user to enter the answer. Add a swcond button which, when clicked, will check to see if the user's answer is correct. The output should be either "correct" or "incorrect" displayed in an alert box. 1. 5+9= 2. 4*6= 3. 25-14= 4. 48/3= 5. 26%6=

Using PHP and MYSQL and with a simple customer database, how can I create a simple...

Using PHP and MYSQL and with a simple customer database, how can I create a simple log in and registration system for an ecommerce site

1 -Create the code to generate a default web page. The contents of this page should...

1 -Create the code to generate a default web page. The contents of this page should be YourName, right justified

2 -Create the code to generate a web page that contains a table. The table should...

2 -Create the code to generate a web page that contains a table. The table should have 4 columns and 4 rows. Each cell should be 100 pixels wide by 100 pixels high. The border should be 2 pixels.

Using PHP and MySQL Create a simple web form with at least 5 fields Include validation...

Using PHP and MySQL Create a simple web form with at least 5 fields Include validation and error messages Create a MySQL Database Create a table to store submissions from the form Only insert new data into the database when all validation is passed Use PHP to create an HTML table showing all the content of the database New submissions should appear in table

Using the sample.sql script, create the sample database in MySQL. Submit the MySQL interactive screen that...

Using the sample.sql script, create the sample database in MySQL. Submit the MySQL interactive screen that results. create database sample; use sample; create table customer (custno int auto_increment primary key, firstname varchar(20), middle varchar(20), lastname varchar(20), address varchar(60), telnum1 varchar(10), telnum2 varchar(10), telnum3 varchar(10), pin varchar(6), email varchar(30)); create table accttype (id int primary key, type varchar(10)); insert into accttype (id, type) values (1,'check'); insert into accttype (id, type) values (2,'save'); insert into accttype (id, type) values (3,'cd'); insert into...

Design Of Database System Course True or False 1. In MySQL, it is possible to create...

Design Of Database System Course True or False 1. In MySQL, it is possible to create a table by using the definition of another table. 2. {(t.lname) | s ∈ Student, s.stuId = t.stuId, t ∉ Graduate_Student, s.major = ‘CS’} is a safe relational calculus expression. 3. In SQL, it is possible to insert multiple rows into a table using a single INSERT statement.

Create a Web page about yourself containing the following: Notepad++ The page should have a light...

Create a Web page about yourself containing the following: Notepad++ The page should have a light green background and a one inch margin. The Web page should contain: At least three headings, h1 to h3. At least two paragraphs about you. A numbered list with at least three hyperlinks. The hyperlinks cannot be the ones we created in class today which were the links to Yahoo and Google. Two horizontal rules. All the h1, h2, and h3 tags should have...

Using JavaScript, create a simple web page that will take orders for Chess Org. Chess Org...

Using JavaScript, create a simple web page that will take orders for Chess Org. Chess Org sells yearly membership for $30 each. Discounts are given for buying in bulk (see Table 1 and example below). Table 1 – Discounts Quantity Purchased Discount 1 – 29 0% 30 - 59 10% 60 + 15% Example: If a customer purchases 40 family membership, their total price (CTotal) would be: COriginalPrice = 30*40=1200 DMainDiscount = 1200*0.1=120 CTotalPrice = COriginalPrice - DMainDiscount= 1200-120 =...

Make a modest or simple Web page using Python flask. The basic components of HTML should...

Make a modest or simple Web page using Python flask. The basic components of HTML should be included. The Web page should have at least 3 Headings(<h1>), paragraph (<p>), comments (), ordered list, unordered list, three links to website, and should display time & date. Example: <html> <head> <title>Page Title</title> </head> <body> ..new page content.. </body> </html>

Subjects