无法使jquery ajax调用正常工作

Question

I'm trying to code my first ajax function using jquery. 我正在尝试使用jquery编写我的第一个ajax函数。 I can't get it to work and am at a loss on why. 我无法使它正常工作，并且对原因不知所措。 My intent is to trigger the call upon a dropdown selection change event. 我的意图是在下拉选择更改事件时触发呼叫。 I've boiled it down to the most basic function, just to try to establish that the process is completing, and it isn't. 我将其归结为最基本的功能，只是为了试图确定该过程已完成，而事实并非如此。

My jquery code: 我的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);
        }
    });
})

Content of testing.php: testing.php的内容：

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

The intent is that the php will grab data based on "id" and return html that I want to use to replace what was in #gallist. 目的是使php将根据“ id”获取数据并返回html，以替换#gallist中的内容。 I left the commented line of code for illustration. 我留下了注释的代码行以进行说明。 That wasn't happening, so I put alerts to see how far I was getting. 那没有发生，所以我发出警报以查看我能走多远。 Using an alert I verified that the change function executes and "id" captures the intended value. 使用警报，我验证了更改功能已执行并且“ id”捕获了预期值。 I don't seem to be getting to the response. 我似乎没有得到回应。 I don't get the alert for success or for error, like nothing is happening. 我没有收到成功或错误的警报，就像什么都没有发生一样。
Can anyone point me in a direction to figure out why? 谁能指出我的方向以找出原因？

As requested by Marios, the entire html/javascript for this is as follows: 根据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>

And then the javascript: 然后是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

You can just chain the "done" and "fail" functions instead of using them as arguments. 您可以只链接“完成”和“失败”功能，而不用将它们用作参数。 (Based on the Documentation error/success are deprecated) （基于文档错误/成功，已弃用）

The following code works. 以下代码有效。

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

Try this. 尝试这个。

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

I think the mystery is solved. 我认为谜团已经解决。 There must be a bug in the jquery 1.11.0 library. jQuery 1.11.0库中必须存在一个错误。 I downloaded and ran with jquery 1.11.2, without changing anything else, and it worked. 我下载并运行了jquery 1.11.2，并且没有进行任何其他更改，并且运行正常。 Marios, thanks for all the time you spent trying to help. 马里奥斯（Marios），感谢您一直以来努力提供帮助。 I'm going to go try to grow my hair back now. 我现在要去尝试重新长发。

无法使jquery ajax调用正常工作

问题描述

3 个解决方案

解决方案1
0 2015-03-28 02:31:38

解决方案2
0 2015-03-28 03:19:38

解决方案3
0 已采纳 2015-03-30 23:25:16

无法使jquery ajax调用正常工作

问题描述

3 个解决方案

解决方案1 0 2015-03-28 02:31:38

解决方案2 0 2015-03-28 03:19:38

解决方案3 0 已采纳 2015-03-30 23:25:16

解决方案1
0 2015-03-28 02:31:38

解决方案2
0 2015-03-28 03:19:38

解决方案3
0 已采纳 2015-03-30 23:25:16