Skip to content

Instantly share code, notes, and snippets.

@codecybe

codecybe/js-ajax-php-json-return.html

Forked from jonsuh/js-ajax-php-json-return.html
Created March 29, 2019 20:41
Show Gist options
  • Save codecybe/c97b5f66418200070cb0422fc5fb6ce7 to your computer and use it in GitHub Desktop.
Save codecybe/c97b5f66418200070cb0422fc5fb6ce7 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @jonsuh jonsuh revised this gist Apr 21, 2016. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions js-ajax-php-json-usage.html
    View file
    Original file line number Diff line number Diff line change
    @@ -26,8 +26,8 @@

    <!--Put the following in the <body>-->
    <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" />
    <input type="text" name="favorite_restaurant" value="" placeholder="Favorite restaurant" />
    <input type="text" name="favorite_beverage" value="" placeholder="Favorite beverage" />
    <select name="gender">
    <option value="male">Male</option>
    <option value="female">Female</option>
  2. @jonsuh jonsuh revised this gist Apr 21, 2016. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions js-ajax-php-json.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    <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" />
    <input type="text" name="favorite_restaurant" value="" placeholder="Favorite restaurant" />
    <input type="text" name="favorite_beverage" value="" placeholder="Favorite beverage" />
    <select name="gender">
    <option value="male">Male</option>
    <option value="female">Female</option>
  3. @jonsuh jonsuh renamed this gist Sep 17, 2012. 1 changed file with 0 additions and 0 deletions.
    0 js-ajax-php-json.js → js-ajax-php-json-script.html
    View file
    File renamed without changes.
  4. @jonsuh jonsuh revised this gist Sep 17, 2012. 1 changed file with 24 additions and 0 deletions.
    24 changes: 24 additions & 0 deletions js-ajax-php-json.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    <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"] + "<br />Favorite restaurant: " + data["favorite_restaurant"] + "<br />Gender: " + data["gender"] + "<br />JSON: " + data["json"]
    );

    alert("Form submitted successfully.\nReturned json: " + data["json"]);
    }
    });
    return false;
    });
    });
    </script>
  5. @jonsuh jonsuh revised this gist Sep 17, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions response.php
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    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(); break;
    case "test": test_function(); break;
    }
    }
    }
    @@ -13,7 +13,7 @@ function is_ajax() {
    return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
    }

    function test(){
    function test_function(){
    $return = $_POST;

    //Do what you need to do with the info. The following are some examples.
  6. @jonsuh jonsuh revised this gist Sep 17, 2012. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions js-ajax-php-json-return.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    <div class="the-return">
    [HTML is replaced when successful.]
    </div>
  7. @jonsuh jonsuh revised this gist Sep 17, 2012. 1 changed file with 9 additions and 0 deletions.
    9 changes: 9 additions & 0 deletions js-ajax-php-json.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    <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>
  8. @jonsuh jonsuh revised this gist Sep 17, 2012. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion js-ajax-php-json-usage.html
    View file
    Original file line number Diff line number Diff line change
    @@ -33,4 +33,8 @@
    <option value="female">Female</option>
    </select>
    <input type="submit" name="submit" value="Submit form" />
    </form>
    </form>

    <div class="the-return">
    [HTML is replaced when successful.]
    </div>
  9. @jonsuh jonsuh revised this gist Sep 17, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion js-ajax-php-json-usage.html
    View file
    Original file line number Diff line number Diff line change
    @@ -9,7 +9,7 @@
    $.ajax({
    type: "POST",
    dataType: "json",
    url: "response.php", //relative or absolute path to response.php file
    url: "response.php", //Relative or absolute path to response.php file
    data: data,
    success: function(data) {
    $(".the-return").html(
  10. @jonsuh jonsuh revised this gist Sep 17, 2012. 1 changed file with 6 additions and 1 deletion.
    7 changes: 6 additions & 1 deletion response.php
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    <?php
    if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { //Checks if the request is AJAX
    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
    @@ -8,6 +8,11 @@
    }
    }

    //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(){
    $return = $_POST;

  11. @jonsuh jonsuh revised this gist Sep 17, 2012. 1 changed file with 6 additions and 4 deletions.
    10 changes: 6 additions & 4 deletions response.php
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,10 @@
    <?php
    if (isset($_POST["action"]) && !empty($_POST["action"])) {
    $action = $_POST["action"];
    switch($action) {
    case "test": test(); break;
    if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { //Checks if the request 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(); break;
    }
    }
    }

  12. @jonsuh jonsuh revised this gist Sep 17, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion js-ajax-php-json-usage.html
    View file
    Original file line number Diff line number Diff line change
    @@ -9,7 +9,7 @@
    $.ajax({
    type: "POST",
    dataType: "json",
    url: "response.php",
    url: "response.php", //relative or absolute path to response.php file
    data: data,
    success: function(data) {
    $(".the-return").html(
  13. @jonsuh jonsuh revised this gist Sep 17, 2012. 1 changed file with 21 additions and 0 deletions.
    21 changes: 21 additions & 0 deletions response.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    <?php
    if (isset($_POST["action"]) && !empty($_POST["action"])) {
    $action = $_POST["action"];
    switch($action) {
    case "test": test(); break;
    }
    }

    function test(){
    $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);
    }
    ?>
  14. @jonsuh jonsuh revised this gist Sep 17, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions js-ajax-php-json-usage.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    //Put the following in the <head>
    <!--Put the following in the <head>-->
    <script type="text/javascript">
    $("document").ready(function(){
    $(".js-ajax-php-json").submit(function(){
    @@ -24,7 +24,7 @@
    });
    </script>

    //Put the following in the <body>
    <!--Put the following in the <body>-->
    <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" />
  15. @jonsuh jonsuh created this gist Sep 17, 2012.
    36 changes: 36 additions & 0 deletions js-ajax-php-json-usage.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    //Put the following in the <head>
    <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",
    data: data,
    success: function(data) {
    $(".the-return").html(
    "Favorite beverage: " + data["favorite_beverage"] + "<br />Favorite restaurant: " + data["favorite_restaurant"] + "<br />Gender: " + data["gender"] + "<br />JSON: " + data["json"]
    );

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

    //Put the following in the <body>
    <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>