Append PHP HTML code using jQuery AJAX

Today, We want to share with you Append PHP HTML code using jQuery AJAX.In this post we will show you How to add/append PHP + HTML code in JQuery .append(), hear for ajax post method of jQuery to load data in HTML div and table example we will give you demo and example for implement.In this post, we will learn about jQuery Insert Content Inside, Before or After an Element with an example.

Append PHP HTML code using jQuery AJAX

There are the Following The simple About Append PHP HTML code using jQuery AJAX Full Information With Example and source code.

As I will cover this Post with live Working example to develop How to append a file from PHP to div using jQuery AJAX?, so the Using AJAX to Update Content for this example is following below.

Read Also:  how to append html in jquery?

index.html

<!doctype html>
<html>
<head>
    <title>How to append a file from PHP to div using jQuery AJAX?</title>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$("#submitbtn").click(function(){ 

$.post("invoice.txt",function(postresult){
    $(".divinvoice").append(postresult);
    });

});
});
</script>

<style>
.divinvoice{
width:650px;
height: auto;
padding:20px;
background-color:#9C0747;
color:#fff;
font-size:20px;
}
</style>

</head>
<body>
 
<h1>A jQuery Using AJAX to Update Content demo </h1>
<p><button id="submitbtn">Click here to load data by Invoice</button></p>
<div class="divinvoice"></div>
 
</body>
</html>

jQuery and Ajax are buzzwords now a days in web development community:

<ul>
<li>jquery append</li>
<li>jquery append after</li>
<li>javascript append html to body</li>
<li>jquery append multiple elements</li>
<li>jquery append before</li>
<li>jquery append not working</li>
<li>javascript append html string</li>
add and remove html elements dynamically with jquery</li>
</ul>

jQuery Ajax Call to PHP Script with JSON Return

HTML Part

<form action="return.php" class="store-products-js-ajax" method="post" accept-charset="utf-8">
  <input type="text" name="products-targets" value="" placeholder="products targets" />
  <input type="text" name="products-review" value="" placeholder="products review" />
  <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="data-response"></div>
<script type="text/javascript">
$("document").ready(function(){
  $(".store-products-js-ajax").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) {
        $(".data-response").html(
          "products beverage: " + data["products-targets"] + "<br />products targets: " + data["products-review"] + "<br />Gender: " + data["gender"] + "<br />JSON: " + data["json"]
        );

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

PHP Script

Read Also:  How to Add Attribute to an HTML Element in jQuery?

<?php
if (check_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": products_function(); break;
    }
  }
}

function check_is_ajax() {
  return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
}

function products_function(){
  $data_res = $_POST;
  $data_res["json"] = json_encode($data_res);
  echo json_encode($data_res);
}
?>

Angular 6 CRUD Operations Application Tutorials

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

More : jquery append,jquery append after,jquery append before,jquery append multiple elements,javascript append html to body,jquery html,jquery append not working,jquery create dom element

I hope you get an idea about Append PHP HTML code using jQuery AJAX.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.