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.

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

<?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.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Laravel 5.7 Google reCAPTCHA Tutorial with Example
  2.   Email Validation in pure JavaScript | Validate email address
  3.   react open new tab Example with Tutorial
  4.   Laravel force https with url helper
  5.   JQuery Remove combobox items(options) from DropDownList
  6.   Simple VueJS DataTables Example
  7.   PHP - How to Get current url using CodeIgniter controller's URL from a view
  8.   jQuery AJAX Multiple Files Upload using PHP
  9.   File Upload - Auto Resize Compress-Reduce image using PHP
  10.   Upload Multiple Images Preview using PHP