jQuery在PC上工作,但不能在WAMP或共享服务器上工作


jQuery working on PC but not on WAMP or Shared Server

我不知道为什么,但我有一段代码在我的系统上工作,但不能在WAMP或共享服务器上工作。

下面是我的代码:-

<html>
  <body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script type="text/javascript">
      (function($) {
        $.ajax({
          url:"select2.json",
          type:"GET",
          dataType:"json",
          success:function(data){
            var selectedDepartment, selectedSubproj;
            $.fn.changeType = function() {
              var options_projname = '<option>Select<'/option>';
              $.each(data, function(i, d) {
                options_projname += '<option value="' + d.projname + '">' + d.projname + '<'/option>';
              });
              $("select#projname", this).html(options_projname);
              $("select#projname").change(function() {
                var index = $(this).get(0).selectedIndex;
                var d = data[index - 1]; // -1 because index 0 is for empty 'Select' option
                selectedDepartment = d;
                var options = '';
                if (index > 0) {
                  options += '<option>Select<'/option>';
                  $.each(d.subproj, function(i, j) {
                    options += '<option value="' + j.title + '">' + j.title + '<'/option>';
                  });
                } else {
                  options += '<option>Select<'/option>';
                }
                $("select#subproj").html(options);
              });
              $("select#subproj").change(function() {
                var index = $(this).get(0).selectedIndex;
                selectedSubproj = selectedDepartment.subproj[index -1];
                var options = '';
                if (index > 0) {
                  $.each(selectedSubproj.unit, function(i, b) {
                    //options += '<option value="' + b.name + '">' + b.name + '<'/option>';
                    options += '<input type="checkbox" name="' + b.name + '" value="' + b.name + '">' + b.name + '<br/>';
                  });
                } else {
                  options += '<option>Select<'/option>';
                }
                $("#unit").html(options);
              });
            };
          }
        });
      })(jQuery);
      $(document).ready(function() {
        $("form#search").changeType();
      });
    </script>
    <form id="search" action="" name="search">
      <select name="projname" id="projname">
        <option>Select</option>
      </select>
      <select name="subproj" id="subproj">
        <option>Select</option>
      </select>
      <div name="unit" id="unit">
      </div>
    </form>
  </body>
</html>

当我在WAMP或共享服务器上运行时,我得到以下错误。http://s8.postimg.org/vj19w76v9/error.png但是如果我在我的pc上像运行一个普通的html文件一样运行它就可以了。我的JSON也渲染得很好,所以我知道它没有问题。

我试着清理缓存和所有的好东西,但它吃了我的大脑…

如果有人能帮忙我将很高兴。

提前感谢……欢呼声…

问题是您在ajax调用的success回调中定义了您的changeType插件。因此,当文档准备好时,当您调用该插件时,它将是未定义的。您需要首先定义插件,并考虑通过参数从ajax调用获得的data变量的方法。我相信像这样粗略的代码应该可以工作:

(function ($) {
    $.fn.changeType = function (data) {
        var selectedDepartment, selectedSubproj;
        var options_projname = '<option>Select<'/option>';
        $.each(data, function (i, d) {
            options_projname += '<option value="' + d.projname + '">' + d.projname + '<'/option>';
        });
        $("select#projname", this).html(options_projname);
        $("select#projname").change(function () {
            var index = $(this).get(0).selectedIndex;
            var d = data[index - 1]; // -1 because index 0 is for empty 'Select' option
            selectedDepartment = d;
            var options = '';
            if (index > 0) {
                options += '<option>Select<'/option>';
                $.each(d.subproj, function (i, j) {
                    options += '<option value="' + j.title + '">' + j.title + '<'/option>';
                });
            } else {
                options += '<option>Select<'/option>';
            }
            $("select#subproj").html(options);
        });
        $("select#subproj").change(function () {
            var index = $(this).get(0).selectedIndex;
            selectedSubproj = selectedDepartment.subproj[index - 1];
            var options = '';
            if (index > 0) {
                $.each(selectedSubproj.unit, function (i, b) {
                    //options += '<option value="' + b.name + '">' + b.name + '<'/option>';
                    options += '<input type="checkbox" name="' + b.name + '" value="' + b.name + '">' + b.name + '<br/>';
                });
            } else {
                options += '<option>Select<'/option>';
            }
            $("#unit").html(options);
        });
    };

})(jQuery);
$(document).ready(function () {
    $.ajax({
        url: "select2.json",
        type: "GET",
        dataType: "json",
        success: function (data) {
            $("form#search").changeType(data);
        }
    });
});