How to implement error handling and display custom error messages with AJAX in jQuery?

To implement error handling and display custom error messages with AJAX in jQuery, you can use the error callback function of the AJAX request and modify the error message accordingly. Here's an example:

$.ajax({
  url: "your-url",
  method: "POST",
  data: yourData,
  success: function(response) {
    // Handle success response
  },
  error: function(xhr, textStatus, errorThrown) {
    var errorMessage = "";

    switch (xhr.status) {
      case 400:
        errorMessage = "Bad Request";
        break;
      case 404:
        errorMessage = "Not Found";
        break;
      case 500:
        errorMessage = "Internal Server Error";
        break;
      // Add more cases for other error codes as needed
      default:
        errorMessage = "Unknown Error";
        break;
    }

    // Display custom error message
    $("#error-message").text("Error: " + errorMessage);
  }
});

In this example, we make an AJAX request to a specific URL and handle success and error responses. Inside the error callback function, we create a variable errorMessage to hold the custom error message.

We use the switch statement to map different HTTP status codes to appropriate error messages. You can customize the cases to handle specific error codes according to your needs.

Finally, we display the custom error message by setting the text of an element with the id error-message. Make sure you have an element in your HTML with that id where you want to display the error message.

Feel free to modify the error message mapping and error message display as per your requirements.