Sending variable Client Side (JS Ajax) to Server Side (Python Django) - django

I am using Python 3.7.4 with Django 3.0.3 and I have a script Ajax in javascript run in the front end app. When the user click in link, a variable must to be sending to back end python. See the exemple
Javascript
$('.likebutton').click(function() {
var catid;
catid = $(this).attr("data-catid");
$.ajax({
type: "GET",
// url: "/likePost",
url: "/likePost/" + catid,
/* data: {
post_id: catid
},
*/
success: function(data) {
$('#like' + catid).remove();
$('#message').text(data);
}
})
});
urls.py
In the urlpattner of app I have
urlpatterns = [
path('', views.index, name='index'), # index view at /
path('likePost/', views.likePost, name='likepost'), # likepost view at /likepost
]
views.py
def likePost(request):
if request.method == 'GET':
post_id = request.GET['post_id']
likedpost = Post.obejcts.get(pk=post_id) #getting the liked posts
m = Like(post=likedpost) # Creating Like Object
m.save() # saving it to store in database
return HttpResponse("Success!") # Sending an success response
else:
return HttpResponse("Request method is not a GET")
In Debug I received the follow message error
Not Found: /likePost
[25/Feb/2020 16:12:17] "GET /likePost?post_id=1 HTTP/1.1" 404 2335
What I am doing wrong?

In your ajax script, you are passing a querystring parameter called post_id (eg. likePost/?post_id=1), but in your urlpatterns, you specify post_id as a path parameter (eg. likePost/1/).
You have 2 options:
post_id as a path parameter
Add the post_id to the url instead of sending it as data:
$('.likebutton').click(function() {
var catid;
catid = $(this).attr("data-catid");
$.ajax({
type: "GET",
// standard syntax
url: "/likePost/" + catid,
// template string syntax
// url: `/likePost/${catid}`,
success: function(data) {
$('#like' + catid).remove();
$('#message').text(data);
}
})
});
Then add post_id to your view:
def likePost(request, post_id):
...
post_id as a querystring
change your path to the following:
path('likePost/', views.likePost, name='likepost')
You can then access post_id via request.GET in your view:
def likePost(request):
post_id = request.GET['post_id']
...
Furthermore, I'd recommend reading When do I use path parameters vs. query params in a RESTful API? if you aren't sure of which option to use.

Related

Django chunked upload in IIS

I uploaded a program on which a django application is used for file uploading and used the chunk file uploads for it (with the blueimp fileupload on JS side).
When I tested my application locally, it works. When I do it on the IIS production, I always get this error:
POST http://URL/api/chunked_upload/ 500 (Internal Server Error)
The logs in the IIS were not helpful either.
JS Code:
$('#fileUpload').fileupload({
url: window.location.href + 'api/chunked_upload/',
dataType: "json",
maxChunkSize: 100000, // Chunks of 100 kB
formData: form_data,
type: 'POST',
add: function (e, data) {
form_data.splice(1);
calculate_md5(data.files[0], 100000);
$("#submitButton").off('click').on("click", function () {
showLoading()
data.submit();
});
},
chunkdone: function (e, data) { // Called after uploading each chunk
if (form_data.length < 2) {
form_data.push(
{"name": "upload_id", "value": data.result.upload_id}
);
}
},
done: function (e, data) { // Called when the file has completely uploaded
let formInput;
$.ajax({
type: "POST",
url: window.location.href + 'api/chunked_upload_complete/',
data: {
csrfmiddlewaretoken: csrf,
upload_id: data.result.upload_id,
md5: md5
},
dataType: "json",
success: function(data) {
inputForm = document.getElementById('ddGraderForm')
document.getElementById('id_formFile').value = data['file']
inputForm.submit()
}
});
},
});
Django urls
urlpatterns = [
path('', views.webinterfaceViews, name='main'),
path('api/chunked_upload_complete/', FastaFileUploadCompleteView.as_view(), name='api_chunked_upload_complete'),
path('api/chunked_upload/', FastaFileUploadView.as_view(), name='api_chunked_upload'),
]
Django view
class FastaFileUploadView(ChunkedUploadView):
model = fileUpload
def check_permissions(self, request):
# Allow non authenticated users to make uploads
pass
class FastaFileUploadCompleteView(ChunkedUploadCompleteView):
model = fileUpload
def check_permissions(self, request):
# Allow non authenticated users to make uploads
pass
def on_completion(self, uploaded_file, request):
# Do something with the uploaded file. E.g.:
# * Store the uploaded file on another model:
# SomeModel.objects.create(user=request.user, file=uploaded_file)
# * Pass it as an argument to a function:
# function_that_process_file(uploaded_file)
pass
def get_response_data(self, chunked_upload, request):
return {'file': chunked_upload.file.name, 'filename': chunked_upload.filename}
The error code I receive is
BytesReceived="0", ErrorCode="Reached the end of the file.
(0x80070026)"
Headers="Content-Type: text/html
Vary: Cookie
Server: Microsoft-IIS/10.0
X-Frame-Options: DENY
X-Content-Type-Options: nosniff
Referrer-Policy: same-origin
X-Powered-By: ASP.NET
"

Show loading gif until the django view performs the data processing and renders the template with this data

I have a django project where the page has multiple nav links representing different agents. On clicking any nav link, the urls.py redirects to nav specific view and the view needs to perform some processing to get the data needed to render the template. However as this is syncrhonous rendering it takes a long while to load data (in the order of 15-20s).
Below is my urls.py:
from django.urls import path
from . import views
app_name = 'agent'
urlpatterns = [
path('agent1/', views.agent1, name='agent1'),
path('agent2/', views.agent2, name='agent2'),
path('agent3/', views.agent3, name='agent3'),
path('agent4/', views.agent4, name='agent4'),
]
My views method looks as below:
def agent1(request):
agent_data = Agent1.objects.all()
agent_details = get_agent_details(agent_data)
return render(request, 'manager/data.html', {'agent_data': agent_data, 'agent_details': agent_details})
I am using the {{ agent_data.name }}, {{ agent_data.code }}, {{ agent_data.qty }} and {{ agent_data.price }} along with data from agent_details dictionary in my html to populate a table's rows. How should I change my view method, so that it loads the data via AJAX (javascript) in order to show a loading gif in the meantime and also provide me the data so that I can populate the table. Could someone help me with the Ajax code and the steps as I am new to this technology and not finding any help going through the online tutorials.
So for this to work with ajax, you'll need some javascript in manager/data.html which knows the url to fetch data from.
As an example, I've got an ajax setup which checks a given email address isn't already in use;
(function($) {
$(document).ready(function() {
var validateEmailURL = $section_user_signup.data('ajax-email-url');
function validateEmailUnique() {
var valid = true;
clearError($email);
// Fetch unique status of the provided email
$.ajax({
async: false,
url: validateEmailURL,
method: 'POST',
type: 'POST',
dataType: 'json',
data: {
'email': $email.val(),
'csrftoken': $form.find('input[name="csrfmiddlewaretoken"]').val()
},
success: function (response) {
valid = true;
},
error: function (response) {
setError($email, response["responseJSON"]["error"]);
valid = false;
}
});
return valid;
}
});
})(window.jQuery);
This javascript uses the data attribute of a div for the URL to check;
<div data-ajax-email-url="{% url 'account_ajax_validate_email' %}">
The view which the ajax call goes to looks like this;
def ajax_check_email_unique(request, *args, **kwargs):
"""
Return an JsonResponse to identify if an email is unique.
"""
if not request.is_ajax():
return HttpResponseBadRequest()
if request.is_ajax and request.method == "POST":
email = request.POST.get('email')
if email_address_exists(email):
return JsonResponse(
{
"error":
"Email address already exists. Click "
f"here "
"to login"
},
status=400
)
return JsonResponse(
{"email": email},
status=200
)
# some error occurred
return JsonResponse({"error": ""}, status=400)
The important thing for any view which will be used by javascript is that you return a JsonResponse.
So if I was you, I'd setup a new view for ajax, and that makes your existing one really simple;
def agent1_ajax(request):
agent_data = Agent1.objects.all()
agent_details = get_agent_details(agent_data)
return JsonResponse({
"agent_data": agent_data, "agent_details": agent_details
}, status=200)
def agent1(request):
return render(request, 'manager/data.html', {})
And as far as a loading gif goes, you'd need an element that contains the gif and then you can bind to the ajax event to show/hide;
$(document).ajaxStart(function() {
$("#loading").show();
});
$(document).ajaxStop(function() {
$("#loading").hide();
});

calling ajax function in views.py to get the data from database

I want to fetch data from the database. I am using ajax function to get it in the index.html. How should I call this ajax function to the views.py so i can display it in view. How should I attain it?
My codes:
index.html
<script type="text/javascript">
function submitData(){
// Get answer from the input element
var dt = document.getElementById("major1").value;
var dtt = document.getElementById("major2").value;
var dttt = document.getElementById("major3").value;
var dtttt = document.getElementById("major4").value;
var dttttt = document.getElementById("major5").value;
// add the url over here where you want to submit form .
var url = "{% url 'home' %}";
$.ajax({
url: url,
data: {
'major1': dt,
'major2': dtt,
'major3': dttt,
'major4': dtttt,
'major5': dttttt,
},
dataType: 'JSON',
success: function(data){
// show an alert message when form is submitted and it gets a response from the view where result is provided and if url is provided then redirect the user to that url.
alert(data.result);
if (data.url){
window.open(data.url, '_self');
}
}
});
}
</script>
views.py:
def home(request):
majors = Major.objects.filter(percentages__isnull=False).distinct().order_by("pk")
if request.method == 'POST':
form = request.POST.get('be_nextyr_total')
line_chart = pygal.Line(width=1500)
line_chart.title = 'Budget Estimation'
context = {
"chart": line_chart.render_data_uri(),
'majors': majors
}
return render(request, "website/index.html" , context )
If you are doing a post request with Ajax, then you have to write in your ajax code like
type: "POST",
if you want to access your form data in view than you have to write
request.POST.get('your_variable_name_like_major1')

django upload a file from other python script

I want to save file from the client to the django project server's database from a script. I've tried to do this using a model and a view in the django project, and post request in the other python script, but it keeps return 403 error and not save the file and the data to the database.
models.py:
class ScreenRecord(models.Model):
record = models.FileField(default='output.avi', upload_to='records')
writeTime = models.DateTimeField(auto_now_add=True)
user = models.ForeignKey(User, on_delete=models.CASCADE, default=1)
views.py:
def getscreenrecords(request):
user = User.objects.filter(username=request.POST.get('user')).first()
k = ScreenRecord(record=request.FILES.get('record'), user=user)
k.save()
return HttpResponse('success ' + request.GET.__getitem__('user'))
url.py:
from . import views
urlpatterns = [
path('screenrecords/', views.getscreenrecords, name='getscreenrecords'),
]
python script to send the file:
url = 'http://127.0.0.1:8000/send/screenrecords/'
files = {'record': open('output.avi','rb')}
values = {'user': 'newUser'}
r = requests.post(url, files=files, data=values)
print(r)
what's wrong in my code or is there a way to do this better?
Django needs a CSRF token in POST requests by default.
Check this for more info on how to use it on your requests.
You need to pass csrf_token along with the data passed in your js, if you are doing it within the Django project, here is a sample code to do it.
<script>
var token = '{{csrf_token}}';
$("#id_username").change(function () {
console.log($(this).val());
var form = $(this).closest("form");
$.ajax({
headers: { "X-CSRFToken": token },
url: form.attr("data-validate-username-url"),
data: form.serialize(),
dataType: 'json',
success: function (data) {
if (data.is_taken) {
alert(data.error_message);
}
}
});
});
</script>

Django - retrieve form data

I am trying to send a form through ajax call to django view as follows:
$.ajax({
type: 'POST',
url: "{% url 'edit_experience' %}",
data: {
item_id : itemId,
form: $("#sample-form").serialize()
},
beforeSend : function() {
},
success: function (data) {
},
error: function(data) {
},
complete : function() {
}
});
I am able to see the data being posted to the http server:
form role=Fresher&organization=TestOrganization&description=Hard+work+pays
item_id 3
My problem is in the server side where I am trying to fetch the data. I am able to access the item_id but I am having a problem accessing the form elements:
In Django View:
def edit_experience(request):
request.POST['form']['role']
return ....
This does not fetch the role. What is the correct way to fetch all the form attributes??
Kindly help. Thanks in advance.
To fetch attributes from the querystring you can use QueryDict:
from django.http import QueryDict
d = QueryDict(request.POST['form'])
role = d['role']