Question

我正在尝试使用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);
        }
    });
})

testing.php的内容：

<?php
$result = "You connected";
echo "$result";
?>

意图是php将基于“id”获取数据并返回我想用来替换#gallist中的内容的html。我留下了注释的代码行以供说明。这没有发生，所以我发出警报，看看我到底有多远。使用警报我验证了更改函数执行，“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>");
    });
});
});

Answer 1

您可以将“完成”和“失败”函数链接起来，而不是将它们用作参数。（基于文档错误/成功已弃用）

以下代码有效。

$('#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);
});


});

Answer 2

试试这个。

$('#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);
?>

Answer 3

我认为这个谜团已经解决了。 jquery 1.11.0库中必定存在错误。我下载并运行jquery 1.11.2，没有改变任何其他东西，它工作。马里奥斯，非常感谢您花时间寻求帮助。我现在要去尝试长头发了。

无法获得jquery ajax调用工作

3 个答案: