I am trying to render a Json Response on a html site using AJAX but i keep getting the error:
Uncaught ReferenceError: data is not defined
at HTMLDocument.<anonymous
JsonResponse in Question:
["[53.50119612705815, -1.1270833894501477] -> [53.34474, -3.01101]", "[53.50119612705815, -1.1270833894501477] -> [53.34474, -3.01101]", "[52.04061648544843, -0.6655072691644374] -> [51.90829, -0.5127]", "[52.04061648544843, -0.6655072691644374] -> [51.90829, -0.5127]", "[52.04061648544843, -0.6655072691644374] -> [51.90829, -0.5127]", "[53.50119612705815, -1.1270833894501477] -> [53.42705, -0.94339]"]
Html file with AJAX and JS:
<div class="'row">
<div id="test">
<h1> Test </h1>
</div>
</div>
{% endblock %}
{% block js %}
<script>
$(document).ready(function(){
$.ajax({
type: 'POST',
dataType: 'json',
url: '/network/dispatch_data/',
data: data,
success: function(response) {
console.log(response);
$('#test').append(response.data);
}
});
});
</script>
{% endblock %}
When i inspect element in my browser, the error points to the data: data being the source of the error. Any idea what i'm doing wrong? I can view the url perfectly with the json response but making it show with ajax is proving a problem
You are sending data as the body of your request, but first you have to defined the object you are sending to API
<div class="row">
<div id="test">
<h1> Test </h1>
</div>
</div>
{% endblock %}
{% block js %}
<script>
const data = {
bar: [1, 2, 3],
foo: false
}
$(document).ready(function () {
$.ajax({
type: 'POST',
dataType: 'json',
url: '/network/dispatch_data/',
data: data,
success: function (response) {
console.log(response);
$('#test').append(response.data);
}
});
});
</script>
{% endblock %}