Question

尝试使用php javasript和jQuery教程，我有以下错误。可以找到教程here

以下是Chrome浏览器控制台的错误。

 Failed to load resource: net::ERR_FILE_NOT_FOUND
 auto-complete.js:2 Uncaught ReferenceError: $ is not defined

html代码如下。

  <!DOCTYPE html>
  <html>
     <head>
         <title>Auto-complete tutorial</title>
         <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>
         <script src="auto-complete.js"></script>
     </head>
     <body>
         <input type="text" value="" placeholder="Search" id="keyword">
     </body>
 </html>

使用Javascript：

  var MIN_LENGTH = 3;
  $(document).ready(function() {

      $("#keyword").keyup(function() {
          var keyword = $("#keyword").val();
          if (keyword.length >= MIN_LENGTH) {
              $.get( "auto-complete.php", { keyword: keyword } )
                .done(function( data ) {
                  console.log(data);
                });
           }
       });

  });

这是php代码

  <?php
  $data = array("alpaca", "buffalo", "cat", "tiger");
  echo json_encode($data);
  ?>

请任何建议。这是我从加载页面时得到的新错误

  XMLHttpRequest cannot load file:///C:/Users/Faisal/Desktop/auto_1/auto- 
     complete.php?keyword=abc. Cross origin requests are only supported for 
    protocol schemes: http, data, chrome, chrome-extension, https, chrome-
    extension-resource.k.cors.a.crossDomain.send @ 
    jquery.min.js:4n.extend.ajax @ jquery.min.js:4n.(anonymous function) @
    jquery.min.js:4(anonymous function) @ auto-complete.js:6n.event.dispatch 
    @ jquery.min.js:3r.handle @ jquery.min.js:3
   jquery.min.js:4 XMLHttpRequest cannot load 
   file:///C:/Users/Faisal/Desktop/auto_1/auto-complete.php?keyword=abcd. 
   Cross origin requests are only supported for protocol schemes: http, data,
  chrome, chrome-extension, https, chrome-extension-
  resource.k.cors.a.crossDomain.send @ jquery.min.js:4n.extend.ajax @ 
  jquery.min.js:4n.(anonymous function) @ jquery.min.js:4(anonymous function)
  @ auto-complete.js:6n.event.dispatch @ jquery.min.js:3r.handle @ 

jquery.min.js:3jquery.min.js:4 XMLHttpRequest cannot load
 file:///C:/Users/Faisal/Desktop/auto_1/auto-complete.php?keyword=abcde. 
       Cross origin requests are only supported for protocol schemes: http, 
     data, 
  chrome, chrome-extension, https, chrome-extension-
  resource.k.cors.a.crossDomain.send @ jquery.min.js:4n.extend.ajax @
  jquery.min.js:4n.(anonymous function) @ jquery.min.js:4(anonymous function) 
  @ auto-complete.js:6n.event.dispatch @ jquery.min.js:3r.handle @ 
 jquery.min.js:3

 jquery.min.js:4 XMLHttpRequest cannot load 
  file:///C:/Users/Faisal/Desktop/auto_1/auto-complete.php?keyword=abcdef.
   Cross origin requests are only supported for protocol schemes: http, data,
   chrome, chrome-extension, https, chrome-extension-
   resource.k.cors.a.crossDomain.send @ jquery.min.js:4n.extend.ajax @ 
   jquery.min.js:4n.(anonymous function) @ jquery.min.js:4(anonymous 
   function) @ auto-complete.js:6n.event.dispatch @ jquery.min.js:3r.handle @
    jquery.min.js:3

Answer 1

这部分错误说明了一切：

无法加载文件：/// C：/Users/Faisal/Desktop/auto_1/auto-complete.php？keyword = abc

您是从文件系统打开页面，而不是从Web服务器打开页面。这将极大地限制你可以做的就是网络内容。 JavaScript不允许您从render协议发出AJAX请求，主要是因为＆＃34;文件＆＃34;不要回复HTTP请求。

您也无法使用隐式协议来引用外部资源：

file://

最好的办法是在工作站上设置某种简单的Web服务器来测试代码。否则，您将建立在托管环境中不需要的代码的变通方法，因此您正在测试的内容不会是您最终部署的内容。

Answer 2

您获得的错误是由于您的jQuery库未被正确位置引用而您的自定义脚本文件“auto-complete.js”未被正确引用。

$是jQuery对象的简写。它与写作相同：

jQuery(document).ready(function(){
...
};

在大多数情况下，如果不是所有情况，您都希望在页面上的内容之后以及任何将使用jQuery的自定义脚本之前引用您的jQuery库。（在这种情况下，'$'）

地点：

<script  
  src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="auto-complete.js"></script>

在关闭body标签之前，确保auto-complete.js的脚本src指向正确的位置。例如，如果auto-complete.js位于名为“Scripts”的子目录中，那么您的脚本引用应为：

<script src="/Scripts/auto-complete.js"></script>

另外，我假设你是关闭html标签在auto-complete.js或其他脚本之后的document.ready。如果没有，请确保将其包装在脚本中，并在引用jquery.min.js后放置它。

加载JQuery库会出错

2 个答案: