我正在尝试使用jquery编写我的第一个ajax函数。我无法让它发挥作用，也不知道为什么。我的意图是在下拉选择更改事件时触发调用。我把它归结为最基本的功能，只是试图确定这个过程正在完成，但事实并非如此。
我的jquery代码：
$('#selectgallery').change(function () {
var id = $(this).val();
$.ajax({
type: "GET",
url: "http://www.testsite.com/testing.php",
dataType: "html",
data: "gal =" + id,
success: function (result) {
alert("AjaxSuccess: " + result);
// $("#gallist").html(result);
},
error: function (result) {
alert("AjaxFailed: " + result);
}
});
})
测试内容.php:
<?php
$result = "You connected";
echo "$result";
?>
其目的是php将获取基于"id"的数据，并返回我想用来替换#gallist中的内容的html。我留下了注释的代码行以供说明。这并没有发生，所以我发出警报，看看我能走多远。使用警报，我验证了change函数是否执行，"id"是否捕获了预期值。我似乎没有得到回应。我对成功或错误没有警觉，就像什么都没发生一样
有人能给我指个方向，弄清楚为什么吗？
根据Marios的要求，整个html/javascript如下：
<!DOCTYPE HTML>
<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Merriweather+Sans' rel='stylesheet' type='text/css'>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery-1.11.0.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="header-bg">
<div class="wrap">
<div class="top-header">
<div class="top-header-title">
<p>Test Page</p>
</div>
</div>
</div>
</div>
<div class="content-bg">
<div class="gwrap">
<script src="js/jquery.ruggieri-admin.js"></script>
<div id="testmsg">
<h3>This is the Test MSG Div</h3>
</div>
<div id="gallist">
<h3>This is the GalList Div</h3>
</div>
<div class="gallerylist-form">
<form id="paintinglist" method="post" action="">
<select name='selectgallery' id='selectgallery'>
<option value="01">Gallery 1</option>";
<option value="02">Gallery 2</option>";
<option value="03">Gallery 3</option>";
<option value="04">Gallery 4</option>";
<option value="05">Gallery 5</option>";
</select>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
然后是javascript：
$(document).ready(function(){
$('#selectgallery').change(function () {
var id = $(this).val();
$("#testmsg").html("<h3>GalleryID: is " + id + "</h3>");
$.ajax({
type: "POST",
url: "testing.php",
dataType: "html",
data: "gal=" + id,
async: false,
}).done(function (result) {
$("#gallist").html("<h3>Ajax Done</h3>");
}).fail(function (result) {
$("#gallist").html("<h3>Ajax Failed</h3>");
}).always(function (result) {
$("gallist").html("<h3>Ajax Always</h3>");
});
});
});
您可以将"done"answers"fail"函数链接起来，而不是将它们用作参数。（基于文档错误/成功已弃用）
以下代码有效。
$('#selectgallery').change(function () {
var id = $(this).val();
$.ajax({
type: "GET",
url: "/",
dataType: "html",
data: "gal=" + id
}).done(function (result) {
alert("AjaxSuccess: " + result);
//$("#gallist").html(result);
}).fail(function (result) {
alert("AjaxFailed: " + response);
});
})
试试这个。
$('#selectgallery').change(function () {
var id = $(this).val();
$.ajax({
type: "GET",
url: "http://www.testsite.com/testing.php",
dataType: "json",
data: "gal =" + id,
success: function (result) {
alert("AjaxSuccess: " + result);
$("body").html(result);
},
error: function (result) {
alert("AjaxFailed: " + result);
}
});
});
----
<?php
$result = "You connected";
echo json_encode($result);
?>
我想这个谜已经解开了。jquery 1.11.0库中一定有一个错误。我下载并运行了jquery 1.11.2，没有更改任何其他内容，它起了作用。马里奥斯，谢谢你花这么多时间来帮忙。我现在要去试着把头发长回来。