JSFiddle - React, Tailwind, and code Playground

by anik786

HTML

<strong>Counter:</strong><p id="counter">10</p>
<button id="btnUpdate">Update Counter based on Server</button>

JavaScript

// change this to your path to your code
var phpAjaxUrl = '/echo/html/';
// Change this to the data you want to send to the server (if any)
var data = {
    html: "11",
    delay: 1
}

$("#btnUpdate").on('click', function() {
    $("#btnUpdate").prop("disabled", true)
        .text("Updating...");
    
    $.ajax({
        url: phpAjaxUrl, 
        type: "POST", // can also be GET
        data: data
        
    }).done(function(data) {
      // This is executed after the ajax request is complete
      // data should be the updated value. You can also return other data types e.g. JOSN
       $('#counter').text(data);
       $("#btnUpdate").prop("disabled", false)
        .text("Update Counter based on Server");
    });    
});