无法获得jquery ajax调用工作

时间:2015-03-28 02:11:53

标签: php jquery ajax

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

3 个答案:

答案 0 :(得分:0)

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

以下代码有效。

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

});

答案 1 :(得分:0)

试试这个。

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

答案 2 :(得分:0)

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