Skip to content

Instantly share code, notes, and snippets.

@mahamudul310

mahamudul310/ajax.php

Last active January 29, 2019 14:09
Show Gist options
  • Save mahamudul310/e56d9a5f8bb98a35694a0fc6b652d90f to your computer and use it in GitHub Desktop.
Save mahamudul310/e56d9a5f8bb98a35694a0fc6b652d90f to your computer and use it in GitHub Desktop.
Download ZIP
Ajax
Raw
ajax.php
// Browser support
/*var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject('Microsoft.XMLHttp');
}
request.open('GET', 'data.txt');
request.onreadystatechange = function(){
if((request.readyState == 4) && (request.status==200)){
var modify = document.getElementsByTagName('li');
for(var i=0; i<modify.length; i++){
modify[0].innerHTML = request.responseText;
}
}
}
request.send();*/
//Select uniqui section
/*var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject('Microsoft.XMLHttp');
}
request.open('GET', 'data.txt');
request.onreadystatechange = function(){
if((request.readyState == 4) && (request.status==200)){
var modify = document.getElementsByTagName('ul')[0].getElementsByTagName('li');
modify[4].innerHTML = request.responseText;
}
}
request.send();*/
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject('Microsoft.XMLHttp');
}
request.open('GET', 'data.xml');
request.onreadystatechange = function(){
if((request.readyState == 4) && (request.status==200)){
console.log(request.responseXML.getElementsByTagName('name')[1].firstChild.name.Value);
var items = request.responseXML.getElementsByTagName('name');
var output = '<ul>';
for(var i=0; i< items.length; i++){
output +='<ul>' + items[i].firstChild.nodeValue + '</li>';
}
output +='</ul>';
document.getElementsById('update').innerHTML = output;
}
}
request.send();
=================================================
How to input data in ajax
<!DOCTYPE html>
<html>
<head>
<title>Ajax</title>
</head>
<body>
<h1>AJAX page</h1>
<button id="loadbutton">Load</button>
<div id="update"></div>
<!-- <script type="text/javascript" src="jquery.js"></script> -->
<script type="text/javascript" src="javascript.js"></script>
</body>
</html>
var mybutton = document.getElementById('loadbutton');
mybutton.onclick = function(){
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject('Microsoft.XMLHttp');
}
request.open('GET', 'dataa.json');
request.onreadystatechange = function(){
if((request.readyState===4) && (request.status===200)){
var items = JSON.parse(request.responseText);
var output = '<ul>';
for(var key in items){
output += '<li>' + items[key].name +'</li>';
}
output += '</ul>';
document.getElementById('update').innerHTML = output;
}
}
request.send();
}
=================================================
Upload data in jquery
<!DOCTYPE html>
<html>
<head>
<title>Ajax</title>
</head>
<body>
<h1>AJAX page</h1>
<div class="update"></div>
<div class="update"></div>
<div class="update"></div>
<div class="update"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="javascript.js"></script>
</body>
</html>
$('.update').load('data.txt');
========================================
Upload data in jquery
<!DOCTYPE html>
<html>
<head>
<title>Ajax</title>
</head>
<body>
<h1>AJAX page</h1>
<div id="update">
<h1>Speakers</h1>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="javascript.js"></script>
</body>
</html>
$.getJSON('data.json', function(data){
var output = '<ul>';
$.each(data, function(key, val){
output += '<li>' + val.name + '</li>';
});
output +='</ul>';
$('#update').append(output); //Append show data up
});
$.getJSON('data.json', function(data){
var output = '<ul>';
$.each(data, function(key, val){
output += '<li>' + val.name + '</li>';
});
output +='</ul>';
$('#update').prepend(output); //Prepend show data in down
});
===============================Show value in ajax ========================================
<!DOCTYPE html>
<html>
<head>
<title>Ajax live search</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="searcharea">
<label for="search">Live search</label>
<p>Enter the name or info with you looking for</p>
<input type="search" name="search" id="search" placeholder="name or info" />
</div>
<div id="update"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
================================================
[
{
"name":"Mahamudul",
"shortname":"Hasan",
"email":"[email protected]",
"bio":"Computer Science and Engineering"
},
{
"name":"Rahat",
"shortname":"Manu",
"email":"[email protected]",
"bio":"EEE Engineering"
},
{
"name":"Hasan",
"shortname":"Rana",
"email":"[email protected]",
"bio":"ME Engineering"
}
]
==========================================
//$('#search').keyup(function(){
$.getJSON('data.json', function(data){
var output = '<ul class="searchdoctor">';
$.each(data, function(key, val){
output +='<li>';
output +='<h2>'+ val.name + '</h2>';
output +='<img src="images/'+ val.shortname +'_tn.jpg" alt="'+ val.name +'"/>';
output +='<p>'+ val.bio + '</p>';
output +='</li>';
});
output += '</ul>';
$('#update').html(output);
});
//});
=================================Search Table Data +===============================
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
/*$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});*/
$(document).ready(function(){
$('#myInput').on('keyup', function(){
var value = $(this).val().toLowerCase();
$('#myTable tr').filter(function(){
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>
<input id="myInput" type="text" placeholder="Search..">
<br><br>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</body>
</html>
=======================Search and hide ===================================
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myList li").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</head>
<body>
<h2>Filterable List</h2>
<p>Type something in the input field to search the list for specific items:</p>
<input id="myInput" type="text" placeholder="Search..">
<br>
<ul id="myList">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment