Ajax hyperlink
I have a problem providing Ajax functionality to a hyperlink. I have files Link.html
and GetCustomerdata.php
. The main function of HTML is to send data to getCutomerData.php
and display flash as "success".
And also I do not want hyperlinks,
<a href="#"
Instead, I need it in terms of:
<a href=GetCustomer.php?id=<format>
Can it be cleaned?
link.html
<html>
<head>
<title>Customer Account Information</title>
<script type="text/javascript">
var url = "GetCustomerData.php?id="; // The server-side script
function handleHttpResponse() {
if (http.readyState == 4) {
if(http.status==200) {
var results=http.responseText;
document.getElementById('divCustomerInfo').innerHTML = results;
}
}
}
function requestCustomerInfo() {
var sId =10;
document.getElementById("txtCustomerId").value;
http.open("GET", url + escape(sId), true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
function getHTTPObject() {
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else
if (window.ActiveXObject){
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
if (!xmlhttp){
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
}
return xmlhttp;
}
var http = getHTTPObject();
</script>
</head>
<body>
<a href="getCustomerData.php?id=10&onclick="requestCustomerInfo();return false;">Show Me</a>
<div id="divCustomerInfo"></div>
</body>
</html>
...
And my PHP file just flashes the suceess message:
getCustomerData.php
<?php
echo "Success"
?>
0
source to share
1 answer
You put your anchor event inside the href attribute. onclick should be written as a separate attribute:
...
<a href="getCustomerData.php?id=10" onclick="requestCustomerInfo();return false;">Show Me</a>
To prevent the link from redirecting the page, you need to stop the click event from performing the default action for the link. Inside a function call:
function requestCustomerInfo(event) {
if (!event) var event = window.event;
event.preventDefault();
...
}
+1
source to share