logo    From - Request: JSON. Response: HTML




Form requestes som JSON-fil. Response opbygges som HTML, der indsættes i div-boks styret af css-ident.


HTML


<form action="return.php" class="js-ajax-php-json" method="post" accept-charset="utf-8">
   <input type="text" name="favorite_beverage" value="" placeholder="Favorite restaurant" />
   <input type="text" name="favorite_restaurant" value="" placeholder="Favorite beverage" />
   <select name="gender">
      <option value="male">Male</option>
      <option value="female">Female</option>
   </select>
   <input type="submit" name="submit" value="Submit form" />
</form>

<div class="the-return">
   [HTML is replaced when successful.]
</div>


  • action
    Tilknytning af navn på det (baggrunds-)program, der skal udføre Ajax-aktiviteten på serveren.
  • class
    Den ident der knytter formen til Ajax-scriptets 'event'-lytter.
  • !!!="submit"
    !!!!!!!!!!


global js


<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: "response.php", //Relative or absolute path to response.php file
         data: data,
         success: function(data) {
            $(".the-return").html(
               "Favorite beverage: " + data["favorite_beverage"] + "
Favorite restaurant: " + data["favorite_restaurant"] + "
Gender: " + data["gender"] + "
JSON: " + data["json"]
            );
            alert("Form submitted successfully.\nReturned json: " + data["json"]);
         }
      });
      return false;
   });
});
</script>


  • .js-ajax-php-json
    lytter efter 'class' i 'form'.
  • .submit
    lytter efter 'input type="submit"'.
  • var data = {
    "action": "test"
    };
    Etablerer variablen 'data' og giver den værdien af
  • type: "POST"
    Fortæller ajax(), at de modtagne data er af typen "POST".
  • dataType: "json"
    Fortæller ajax(), at de modtagne data er formatteret i en json-fil.







PHP


return.php


<?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;
   //Do what you need to do with the info. The following are some examples.
   //if ($return["favorite_beverage"] == ""){
   // $return["favorite_beverage"] = "Coke";
   //}
   //$return["favorite_restaurant"] = "McDonald's";
   $return["json"] = json_encode($return);
   echo json_encode($return);
}
?>


  • is_ajax()
    Kontrollerer om det modtagne request er et ajax-request.
x
x