未捕获的TypeError:$ .ajax(...)。错误不是函数

时间:2017-12-26 06:45:24

标签: javascript jquery html ajax

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jquery examples - 4</title>
	<link rel="stylesheet" type="text/css" href="css/style2.css">
</head>
<body>

<input id="name" type="text" name="">
<input id="button" type="button" value="load" name="">
<div id="content"></div>
<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript" src="js/selectors12.js"></script>

</body>
</html>

$('#button').click(function() { 
var name = $('#name').val();

				$.ajax({
					url:'php/page.php',
					data: 'name='+name, //sending the data to page.php
					success: function(data) {  
						$('#content').html(data);

					}
					
				}).error(function() { 
					alert('an error occured');

				}).success(function() { 
					/*alert*/
					alert('an error occured');
				}).complete(function() { 
					/*alert*/
				});
});

error()无效,当我更改网址时:page.php扩展名不正确,以检查error()并显示该网址。

但是,在控制台中显示错误说:

  

未捕获的TypeError:$ .ajax(...)。错误不是函数

4 个答案:

答案 0 :(得分:5)

最新的jQuery将error()替换为fail(),以实现链式承诺调用。所以你应该使用

$.ajax({ 
    .... 
}).done(function(resp){
    //do something when ok
}).fail(function(err) {
    //do something when something is wrong
}).always(function() {
   //do  something whether request is ok or fail
});

答案 1 :(得分:1)

也许你正在使用没有ajax功能的jquery的slim构建。尝试从此link

下载常规版本

答案 2 :(得分:0)

你需要在这里做两件事。

首先使用下面的代码确保Jquery文件中有Ajax。

<script>
    $(document).ready(function() {
      console.log($.ajax);
    });
  </script>

如果这打印错误,那么你没有Ajax。在这种情况下,将jquery更改为指向CDN,如https://code.jquery.com/jquery-2.2.4.min.js

其次将Ajax函数更改为以下。在这里,我修改了错误和完整功能,并删除了重复成功函数。

$.ajax({
    url:'php/page.php',
    data: 'name='+name, //sending the data to page.php
    success: function(data) {  
        $('#content').html(data);
    }, error : function(e) { 
        alert('an error occured');
    }, complete : function() { 
        /*alert*/
    }
});

答案 3 :(得分:0)

您正在使用瘦身版的jQu​​ery。它不支持ajax调用。使用以下cdn

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jquery examples - 4</title>
    <link rel="stylesheet" type="text/css" href="css/style2.css">


</head>
<body>


<input id="name" type="text" name=""> <input id="button" type="button" value="load" name="">


        <div id="content"></div>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/selectors12.js"></script>

</body>
</html>