Input text with autocomplete – Uncaught TypeError: $.ajax is not a function in PHP, MySQL and jQuery

huangapple
go评论101阅读模式
英文:

Input text with autocomplete - Uncaught TypeError: $.ajax is not a function in PHP, MySQL and jQuery

问题

我正在尝试在jQuery中使用PHP和MySQL从数据库中获取用户信息来创建一个自动完成文本输入框。我遇到了以下错误：

  1. Uncaught TypeError: $.ajax is not a function
  2. at HTMLInputElement.<anonymous> (file.php:332)
  3. at HTMLInputElement.dispatch (jquery-3.3.1.slim.min.js:2)
  4. at HTMLInputElement.v.handle (jquery-3.3.1.slim.min.js:2)

我在所有页面中包含的header.php文件中导入了jQuery：

  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

这是我的file.php文件，其中包含脚本和输入部分，我只会留下部分代码，当然，输入框位于一个表单内：

  1. <input type="text" name="autor" id="autor" placeholder="Escreve o nome do autor" />
  2. <div id="autorLista"></div>
  4. <script>
  5.     $(document).ready(function() {
  6.         $('#autor').keyup(function() {
  7.             var query = $(this).val();
  8.             console.log(query);
  10.             if (query != '') {
  11.                 $.ajax({
  12.                     url: "./components/search.php",
  13.                     method: "POST",
  14.                     data: {
  15.                         query: query
  16.                     },
  17.                     success: function(data) {
  18.                         $('#autorLista').fadeIn();
  19.                         $('#autorLista').html(data);
  20.                     }
  21.                 });
  22.             }
  23.         });
  25.         $(document).on('click', 'li', function() {
  26.             $('#autor').val($(this).text());
  27.             $('#autorLista').fadeOut();
  28.         });
  29.     });
  30. </script>

我甚至不知道PHP代码是否正常工作，但我认为是的。我将在下面留下它（search.php）：

  1. <?php
  3. if (isset($_POST['query'])) {
  4.     $link = new_db_connection();
  5.     $stmt = mysqli_stmt_init($link);
  7.     $output = '';
  9.     $query = "SELECT id_user, nome_user FROM users WHERE nome_user LIKE ?";
  11.     if (mysqli_stmt_prepare($stmt, $query)) {
  12.         $output = "<ul>";
  14.         if (mysqli_stmt_num_rows($stmt) > 0) {
  15.             mysqli_stmt_bind_param($stmt, 's', $nome_user);
  17.             mysqli_stmt_execute($stmt);
  19.             mysqli_stmt_bind_result($stmt, $id_user, $nome_user);
  21.             if (mysqli_stmt_fetch($stmt)) {
  22.                 $output .= "<li>" . $nome_user . "</li>";
  23.             }
  24.         } else {
  25.             $output = '<li>O utilizador que procura não existe.</li>';
  26.         }
  27.         $output .= "</ul>";
  28.         echo $output;
  29.     } else {
  30.         echo 'erro';
  31.     }
  32. }

我已经尝试更改jQuery版本，检查了slim版本等等，但都没有使它工作...有什么想法吗？如果有任何疑问或者如果我表述不清楚，请告诉我。谢谢！

英文:

I'm trying to do a autocomplete text input in jQuery with user information from database in PHP and MySQL.
I'm getting the following error:

  1. Uncaught TypeError: $.ajax is not a function
  2. at HTMLInputElement.&lt;anonymous&gt; (file.php:332)
  3. at HTMLInputElement.dispatch (jquery-3.3.1.slim.min.js:2)
  4. at HTMLInputElement.v.handle (jquery-3.3.1.slim.min.js:2)

I import jQuery on header.php that is included in all pages:

  1. &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js&quot;&gt;&lt;/script&gt;

This is my file.php which is the file with the script and the input, I'll leave just a part of the code, of course the input is inside a form

  1. &lt;input type=&quot;text&quot; name=&quot;autor&quot; id=&quot;autor&quot; placeholder=&quot;Escreve o nome do autor&quot; /&gt;
  2. &lt;div id=&quot;autorLista&quot;&gt;&lt;/div&gt;
  4. &lt;script&gt;
  5.     $(document).ready(function() {
  6.         $(&#39;#autor&#39;).keyup(function() {
  7.             var query = $(this).val();;
  8.             console.log(query);
  10.             if (query != &#39;&#39;) {
  11.                 $.ajax({
  12.                     url: &quot;./components/search.php&quot;,
  13.                     method: &quot;POST&quot;,
  14.                     data: {
  15.                         query: query
  16.                     },
  17.                     success: function(data) {
  18.                         $(&#39;#autorLista&#39;).fadeIn();
  19.                         $(&#39;#autorLista&#39;).html(data);
  20.                     }
  21.                 });
  22.             }
  23.         });
  25.         $(document).on(&#39;click&#39;, &#39;li&#39;, function() {
  26.             $(&#39;#autor&#39;).val($(this).text());
  27.             $(&#39;#autorLista&#39;).fadeOut();
  28.         });
  29.     });
  30. &lt;/script&gt;

I don't even know if php code is working correctly but I think it is. I'll leave it below (search.php):

  1. &lt;?php
  3. if (isset($_POST[&#39;query&#39;])) {
  4.     $link = new_db_connection();
  5.     $stmt = mysqli_stmt_init($link);
  7.     $output = &#39;&#39;;
  9.     $query = &quot;SELECT id_user, nome_user FROM users WHERE nome_user LIKE ?&quot;;
  11.     if (mysqli_stmt_prepare($stmt, $query)) {
  12.         $output = &quot;&lt;ul&gt;&quot;;
  14.         if (mysqli_stmt_num_rows($stmt) &gt; 0) {
  15.             mysqli_stmt_bind_param($stmt, &#39;s&#39;, $nome_user);
  17.             mysqli_stmt_execute($stmt);
  19.             mysqli_stmt_bind_result($stmt, $id_user, $nome_user);
  21.             if (mysqli_stmt_fetch($stmt)) {
  22.                 $output .= &quot;&lt;li&gt;&quot; . $nome_user . &quot;&lt;/li&gt;&quot;;
  23.             }
  24.         } else {
  25.             $output = &#39;&lt;li&gt;O utilizador que procura n&#227;o existe.&lt;/li&gt;&#39;;
  26.         }
  27.         $output .= &quot;&lt;/ul&gt;&quot;;
  28.         echo $output;
  29.     } else {
  30.         echo &#39;erro&#39;;
  31.     }
  32. }

I've tried changing versions of jquery, checked the slim version, etc and nothing makes this work... Any idea, please? Any doubts or if I wasn't clear, just tell me please. Thank you!

答案1

得分: 1

In your error it is showing you are using jQuery slim, which doesn't have Ajax.

Please check you are using ONLY normal jQuery, not the slim version.

英文:

In your error it is showing you are using jQuery slim, which doesn't have Ajax.

> (jquery-3.3.1.slim.min.js:2)

Please check you are using ONLY normal jQuery, not the slim version.

答案2

得分: 0

I was importing a slim version when importing bootstrap because it was suggested on their webpage.
现在我使用这个

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

而不是

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

英文:

I was importing a slim version when importing bootstrap because it was suggested on their webpage.
Now I'm using this

  1. &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js&quot;&gt;&lt;/script&gt;

Instead of

  1. &lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.slim.min.js&quot; integrity=&quot;sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;

huangapple
  • 本文由 发表于 2020年1月7日 01:39:51
  • 转载请务必保留本文链接：https://go.coder-hub.com/59616585.html
  • ajax
  • jquery
  • mysql
  • php
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定