jQuery Ajax返回链接不工作
jQuery返回链接不起作用。我已经使用jQuery和基本的Ajax功能。我的jQuery返回文件Links_ajax.php
的链接。jQuery Ajax返回链接不工作
我给的代码样本。
GetCustomerData.php有:
<html>
<script type="text/javascript">
<script src="ajax.js" type="text/javascript">
$(function() {
.....
$.ajax({
type: 'POST',
url: 'Links_ajax.php',
data: 'category='+category ,
success: function(data){
$("#response").html(data);
}
});
}
......
}
...
<! Links return here
<div id="response">
</div>
</html>
<?
echo "Some Code";
?>
....
我Links_ajax.php具有下面的代码
....
echo '<a href="getCustomerData.php?id=10" onclick="requestCustomerInfo();return false;">show me </a>';
echo '<a href="getCustomerData.php?id=11" onclick="requestCustomerInfo();return false;">show me </a>';
....
现在我来给主页getCustomerData.php。我使用了从Links_ajax.php返回链接的Ajax功能。
.....
所以,我的ajax.js有以下的Ajax脚本。
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(event) {
if(event &&event.preventDefault) event.preventDefault();
else if (window.event && window.event.returnValue)
window.eventReturnValue = false;
var sId = 10;
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(); // We create the HTTP object
......
现在我来的问题。当我执行GetCustomerdata.php时,我能够从ajax.JQuery获取所有链接。 而在点击,我需要加载以来同<div>
</div>
一个基本的Ajax特性。但即使完成,我也无法查看它。 我的代码有什么问题吗?或者我必须使用任何其他功能?
首先我不知道为什么你写了一个自定义函数的HttpRequest,而你已经拥有jQuery对象,事实上你已经在使用$就在顶部,但随后()后创建getHTTPObject。
的问题是JavaScript函数requestCustomerInfo()从未授权以处理Ajax响应数据的链接,你需要委派功能作为Ajax请求的回调
$.ajax({
type:'POST',
url: 'Links_ajax.php',
dataType: 'html',
data:'category='+category,
success: function(data){
$("#response").html(data);
// here add the link click handler
$("#response a").click(function(){
// make http get request & custom handler
$.get('GetCustomerData.php?id=10',function(result){
$('#divCustomerInfo').html(result);
}); return false;
});
}
});
对于初学者来说,不要窝脚本标记。带有源代码的脚本标签应该立即关闭,并且应该位于或之下而不在其他位置。
首先尝试以下操作:
success: function(data){
//$("#response").html(data);
alert(data);
}
这样你就会知道,如果它真的返回数据或不。
如果这是工作,那么你可以用
document.getElementById('response').innerHTML = data;
这应该更换
`$("#response").html(data)`
。
我强烈建议,要么使用的是Firefox +萤火测试,或通过将记录您的流量HTTP代理一些其他的浏览器。萤火虫会告诉你所有的Ajax请求的并回应从您的网页,并应帮助您确定数据是否回来了,和什么。