0

I am a beginner in coding and am learning ajax but my code is not working can anyone tell me what is wrong in my code.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({url: "demo.txt", success: function(result){
      $("#div1").html(result);
    }});
  });
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>
</html>

this is demo.txt

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>

this is my console error

Dark Potato Gaming
  • 11
  • 3
  • Right click - > inspect -> console tab . Also , for checking ajax request check this [post](https://stackoverflow.com/questions/1820927/request-monitoring-in-chrome) – Swati Jan 03 '21 at 07:30
  • @Dark Potato Gaming Your web page must be running on a web server like Apache, IIS, NodeJS. If you choose Apache server, you could use AppServ. Source: https://youtu.be/DJZvbk23eoI. – Danny Fardy Jhonston Bermúdez Jan 03 '21 at 07:50

4 Answers4

0

Pls follow the documentation provided at
jQuery.ajax() | jQuery API Documentation

It should work fine when you include in the same order.

G M S
  • 1
0

enter image description here

This is how your URL can use ajax, because Ajax has cross domain restrictions

If you are using vscode editor, you can download the "live server" plug-in and right-click in HTML to open the web page

tang
  • 32
  • 5
  • so do i have to use a server plugin. without it ajax will not work – Dark Potato Gaming Jan 03 '21 at 07:56
  • You can also use a server like Apache, but using Apache may be a little troublesome. Anyway, you can use ajax as long as you make the URL a network address instead of opening it as a local file – tang Jan 03 '21 at 07:59
0

Little information about Ajax. Why do we use ajax, Ajax is mostly used for sending data from Javascript to the Back-end server. Lets say if you want to get the user input from front-end and you want to store the data in your database. Ajax comes to help.

Example of a simple ajax function with passing user data (namely data1 and data2):

$.ajax({
    type: "post",
    data: { 
        user_data1   : data1,
        user_data2   : data2,
    },
    url: YOUR_FUNCTION_PATH,
    success: function(data){
        // After success passing data to YOUR_FUNCTION
        // Handle what you do next
    },  
    error: function (request, status, error) {
        // Error of passing data to YOUR_FUNCTION
        // Debug to see what is wrong
    }
});

Then in your YOUR_FUNCTION and if you sending data to PHP function,

$user_data1 = $_POST['user_data1'];
$user_data2 = $_POST['user_data2'];

If you are using the old one, CodeIgniter, it is pretty simple to get the data.

$user_data1 = $this->input->post('user_data1');
$user_data2 = $this->input->post('user_data2');
Kopi Bryant
  • 1,300
  • 1
  • 15
  • 30
-1

Your URL may need to start with localhost, for example: http://localhost :8080

tang
  • 32
  • 5