Ajax post request is printing json response on empty html page instead of html signup page

Question

I am making a website in django with ajax.I have created a base html file django template and two other html templates named signup.html and home.html.

I have written code to make ajax request with signup form in base.html file like this.

$("#signupBtn").click(function () {
    event.preventDefault();
    username = $('#id_username').val();
    password1 = $('#id_password1').val();
    password2 = $('#id_password2').val();
    data = { username=username, password1=password1, password2=password2 }
    $.ajax({
        type: 'POST',
        url: '{% url "signup" %}',
        data: data,
        success: function (response) {
            // $('#msg').html(`<p  style="font-size: 30px;color: lime;font-weight: bold;">User created succcess!</p>`);
            console.log('FORM SUCCESS!')
            window.location = '{% url "home" %}'
        },
        error: function () {

        }
    })
});

and my signup views is like this:

class signup(View):
    def post(self, request):
        fm=UserCreationForm(request.POST)
        if fm.is_valid():
            fm.save()
            return JsonResponse({'status':1})
    fm = UserCreationForm()
    return JsonResponse({'status':0})

    def get(self, request):
        fm = UserCreationForm()
        return render(request, "home/signup.html", {"form":fm})

Main problem is this, when there goes GET request form is showing and we can enter all details to create account and also account created successfully in admin panel. But in POST request, after saving the form, I get json response printed on blank page instead of getting again that signup page.

How this is possible to return to the same page after post request is made?

This is problem:

Answer 1

I am new programmer here, so don't blame me if I'm wrong, but here's my opinion on this, you can try this for your object initialization

var data = {
  'username': $('#id_username').val() ,
  'password1': $('#id_password1').val() ,
  'password2': $('id_password2').val() 
}

console.log(data)

the other reason your value isn't passed in successfully could be due your dataType isn't assigned when you send in your object which you should include in your ajax, which is

dataType: 'json'