Question

Web Projects If you are learning a web technology, you must create a new page that is web-accessible (use your individual burrow account) that includes a form with a field that allows the user to enter a number only.

● Create an input that allows a number to be entered. Only whole numbers should be allowed.

● Add a button below the input that says "Translate".

● When the button is clicked, it should grab the current number in the input and send a POST request to the magic number generator API with two parameters. ○ The first parameter is your team number (`team`) and can be hard-coded to your team number. ○ The second parameter is the number in your input field (`number`).

● The API returns a JSON response. You should parse the response.

● You will receive two items in the response. Display both response items in a clear way below your translate button. (Do not just display the entire JSON response.) ○ The first is a status, which will be either true (successful) or false (unsuccessful). ○ The second, if your request was successful, will be a message.

using php

Answer 1

I have used jquery Ajax and php for the json implementation.

json-parser.php: thisfile contains all the html form content and jquery ajax method.once user will click on the submit button , ajax function will be called whih will get json response.ajax method will parse the response and display it on html <DIV></DIV>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<!--AJAX cript -->
<script type="text/javascript">
$("document").ready(function(){
$(".js-ajax-php-json").submit(function(){
    var data = {
      "action": "test"
    };
    data = $(this).serialize() + "&" + $.param(data);
    $.ajax({
      type: "POST",
      dataType: "json",
      url: "json-api.php", //Relative or absolute path to response.php file
      data: data,
      success: function(data) {
        $(".the-return").html(
          "Status: " + data["status"] + "<br />Message: " + data["message"] + "<br />"
        );

        alert("Form submitted successfully.\nReturned json: " + data["json"]);
      }
    });
    return false;
});
});
</script>

<!--form with required fields-->
<form action="return.php" class="js-ajax-php-json" method="post" accept-charset="utf-8">
<input type="text" name="number" value="" placeholder="Number" />
<input type="text" name="team" value="" placeholder="Team Number" />

<input type="submit" name="submit" value="Submit form" />
</form>

<div class="the-return">
<!--json response will be parse here in this div-->

</div>
json-api.php: Thisfile contain whole php processing code..it will geta POST ajax call and will send json response to the json-parse.php file.this file check if its a ajax request or not ..if ajax request then it will process further.

<?php
if (is_ajax()) {
if (isset($_POST["action"]) && !empty($_POST["action"])) { //Checks if action value exists
    $action = $_POST["action"];
    switch($action) { //Switch case for value of action
      case "test": test_function(); break;
    }
}
}

//Function to check if the request is an AJAX request
function is_ajax() {
return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
}

function test_function(){
$return = $_POST;

//processing post data here.
if($return["number"]!=0){
          $status = "successful";
          $message = "Your request is successfully completed";
        

   }
   else
           {
                   $status = "Failed";
           $message = "Number can not be blank!";
           }
      
        $return["status"] = $status;
        $return["message"] = $message;

//mycode

$return["json"] = json_encode($return);
echo json_encode($return);
}
?>

---------------------------------------------------

Please give me a UPVOTE. Thank you :)