Uncaught TypeError: $.ajax(…).error is not a function

问题

<!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*/
				});
});

the error() is not working, when I change the URL: to page.php with incorrect extension to check for an error() and display it.

But, in console it displays an error saying:

Uncaught TypeError: $.ajax(...).error is not a function

回答1:

Since version 3.0, jQuery replaces error() with fail() for chained promise call. So you should use

$.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
});

From jQuery Ajax documentation:

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

回答2:

Maybe you are using the slim build of jquery which does not have ajax function. Try to download the regular one from this link

回答3:

You need to do two things here.

First make sure Ajax is there in your Jquery file using below code.

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

If this prints error, then you don’t have Ajax. In this case, change you jquery to point to CDN like https://code.jquery.com/jquery-2.2.4.min.js.

Secondly change you Ajax function to below. Here i modified the error and complete function plus removed duplicate success function.

$.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*/
    }
});

回答4:

You are using slim version of jQuery. It Doesn't support ajax Calling. Use following 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>

来源：https://stackoverflow.com/questions/47974868/uncaught-typeerror-ajax-error-is-not-a-function

标签

javascript

jquery

html

ajax