Hello All,
I am a new Ajax learner... i am trying to do one simple script to handle the following..
Adding, deletion and modification of records in one mysql table using php and Ajax. I have created following code so far... if anyone could lead me to a better simple code which could do the following purpose..
- Search
- add new record
- modify record
- delete record
- Display all records
All this using Ajax - php in Mysql Table.
So far i could do only Add and Display
Step 1: js page
window.onload = makeRequest;
var xhr = false;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) { }
}
}
function makeRequest() {
if (xhr) {
xhr.onreadystatechange = showContents;
xhr.open("GET", "getdata.php");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=tis-620");
xhr.send(null);
}
}
function insert() {
var site_url= encodeURI(document.getElementById('site_url').value);
var site_name = encodeURI(document.getElementById('site_name').value);
nocache = Math.random();
// Pass the login variables like URL variable
xhr.onreadystatechange = showContents;
xhr.open('get', 'insert.php?site_url='+site_url+'&site_name=' +site_name+'&nocache = '+nocache);
xhr.send(null);
}
function showContents() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var outMsg = xhr.responseText;
}
else {
var outMsg = "There was a problem with the request " + xhr.status;
}
document.getElementById("insert_response").innerHTML = outMsg;
}
}
Step 2: index.php
<html>
<head>
<script src="ajax_framework.js" language="javascript"></script>
</head>
<body>
<form action="javascript:insert()" method="post">
URL: <input name="site_url" type="text" id="site_url" value=""/><br>
NAME: <input name="site_name" type="text" id="site_name" value=""/><br>
<input type="submit" name="Submit" value="Insert"/>
</form>
<div id="insert_response"></div>
</body>
</html>
Step 3: show data.php
<?
include "conn.php";
header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header ("Cache-Control: no-cache, must-revalidate");
header ("Pragma: no-cache");
header("content-type: application/x-javascript; charset=tis-620");
$nCntResult = mysql_query("select * from site order by site_name");
echo "<table border=1><tr><td>";
while($nCntRs = mysql_fetch_array($nCntResult))
{
echo "<tr>";
echo "<td>";
echo "<img src='images/edit.jpg' onClick='javascript:editme();'>";
echo "</td>";
echo "<td>";
echo $nCntRs["site_url"];
echo "</td>";
echo "<td>";
echo $nCntRs["site_name"];
echo "</td>";
echo "</tr>";
}
echo "</table>";
?>
step 4: insert data.php
<?
include "conn.php";
if(isset($_GET['site_url']) && isset($_GET['site_name']))
{
$url= $_GET['site_url'];
$sitename= $_GET['site_name'];
$insertSite_sql = "insert into site (site_url, site_name) values('$url','$sitename')";
mysql_query($insertSite_sql) or die(mysql_error());
//echo $sitename;
}
else
{
echo 'Error! Please fill all fileds!';
}
header("location:getdata.php");
exit();
?>
Please guide me to something nicer.