got unexpected result in post data using ajax - django

Question

when I post data to the database using ajax code I got an unexpected result. I can post data but output showing is wrong. My ajax code not execute properly
views.py
def notification(request):
user = request.user
if request.method == 'POST':
property_id = request.POST['property_id']
owner = request.POST['owner_id']
property_object = Property.objects.get(id=property_id)
owner_object =User.objects.all().get(username=owner)
notification = "Hi {}, {} \n have interested
in your property '{}'".format(property_object.owner, user.first_name, property_object.headline)
property_object.notify.add(user)
notifications = Notifications.objects.create(notification=notification, property=property_object, owner=owner_object)
notifications.save()
return JsonResponse({"msg":"success"})
ajax code
<form action="{% url 'notification' %}" method="post" id="notify_form" >
{% csrf_token %}
<input type="hidden" name="owner_id" value="{{ accomodation.owner }}">
<button type="buttonsn" id="request-btn" name="property_id" value="{{ accomodation.id }}" class="btn btn-primary">Contact info:</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(document).ready(function(e){
$(document).on('submit','#request-btn',function(e){
e.preventDefault();
var property_id = $this.attr('value');
var owner_id = $this.attr('value');
$.ajax({
type:'POST',
url:"{% url 'notification' %}",
data:$('#notify_form').serialize(),
dataType:'Json',
success:function(data){
if(data.msg == "success"){
alert('data submitted')
}
}
});
});
});
I'm expecting a success alert box, but got
{"msg": "success"}
in a white window like 'httpResponse'. ajax code doesn't work
for overcome i'am try somechanges in mycode
i removed action address from form
<form action="" method="post" id="notify_form" >
but it doesn't work this time form not submitted
what can I do

Answer 1

You're attaching the event handler to the button:
$(document).on('submit','#request-btn',function(e){
But buttons don't have submit events, forms do. You can attach it to the form:
$(document).on('submit','#notify_form',function(e){
Or use the button's click event instead:
$(document).on('click','#request-btn',function(e){
Note also that there's a typo in the type attribute for the <button> element. It should be:
type="button"