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

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: please check the problem as show in image

CodePudding user response：

I'm not sure how the data is getting sent successfully, since the syntax is not correct. It should be:

// (I'm not sure if you need the quotes in JQuery)
data = {
    'username': username,
    'password1': password1,
    'password2': password2
}

Now the reason for not redirecting is that window.location does not redirect you to another page. If you want to redirect do:

window.location.href = '{% url "home" %}'

CodePudding user response：

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'