Skip to content

Instantly share code, notes, and snippets.

@AshishPandagre
Created May 31, 2021 05:48
Show Gist options
  • Save AshishPandagre/dd841c518b8d0b24df0b9918d18f616b to your computer and use it in GitHub Desktop.
Save AshishPandagre/dd841c518b8d0b24df0b9918d18f616b to your computer and use it in GitHub Desktop.
Sending a POST request from javascript to django views.
<html>
<title>Tweets page</title>
<head></head>
<body>
{% for tweet in tweets %}
{{ tweet.tweet }}
{{ tweet.likes }}
<button data-tweet="{{ tweet.id }}" data-action='like'>Like</button>
<br><br>
{% endfor %}
</body>
<script>
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
const csrftoken = getCookie('csrftoken');
var buttons = document.getElementsByTagName("button")
for(button of buttons){
button.addEventListener('click', function(){
likePost(this.dataset.tweet, this.dataset.action)
})
}
function likePost(tweetId, tweetAction){
console.log(tweetId, tweetAction)
config = {
method: "POST",
body: JSON.stringify({'tweetId': tweetId, 'tweetAction': tweetAction}),
headers: {
'X-CSRFToken': csrftoken,
'Content-Type': 'application/json',
}
}
fetch('/likepost/', config)
.then(res => res.json())
.then(data => {
console.log(data)
alert(data['message'])
})
.catch(err => {
console.log(err)
})
}
</script>
</html>
from django.urls import path
from .views import likePost, index
urlpatterns = [
path('', index, name='index'),
path('likepost/', likePost, name='like post'),
]
def index(request):
tweets = Tweet.objects.all()
return render(request, 'index.html', {'tweets': tweets})
def likePost(request):
tweetId = json.loads(request.body)['tweetId']
tweetAction = json.loads(request.body)['tweetAction']
print(tweetId, tweetAction)
response = HttpResponse(json.dumps({"message": "DONE"}))
response.status_code = 200
return response
@AshishPandagre
Copy link
Author

This can be used when adding or removing a product from a cart, basically at places where you want the user to remain at the same page and at same time make some changes, like liking a tweet or a post, posting a comment on a post.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment