Django,想要加载一个网站,然后更新它

时间:2015-12-10 07:03:21

标签: javascript python ajax django

我是Django和Python的新手,所以请耐心等待。 我正在尝试提交表单(在<!DOCTYPE html> <html ng-app="myApp"> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> </head> <body class="container" ng-controller="FooCtrl"> <h1>Hello Plunker!</h1> <div class="well well-sm"> <form class="form-horizontal"> <div class="form-group"> <label class="control-label col-xs-3">Address 1</label> <div class="col-xs-6"> <input type="text" ng-model="billing.address1" class="form-control input-sm"/> </div> </div> <div class="form-group"> <label class="control-label col-xs-3">Address 2</label> <div class="col-xs-6"> <input type="text" ng-model="billing.address2" class="form-control input-sm"/> </div> </div> <div class="form-group"> <label class="control-label col-xs-3">City</label> <div class="col-xs-6"> <input type="text" ng-model="billing.city" class="form-control input-sm"/> </div> </div> </form> </div> <div class="checkbox"> <label> <input type="checkbox" ng-model="copyAddress" ng-change="copyAddresses()"/> Check if billing address and shipping address is same </label> </div> <div class="well well-sm"> <form class="form-horizontal"> <fieldset ng-disabled="copyAddress"> <div class="form-group"> <label class="control-label col-xs-3">Address 1</label> <div class="col-xs-6"> <input type="text" ng-model="shipping.address1" class="form-control input-sm"/> </div> </div> <div class="form-group"> <label class="control-label col-xs-3">Address 2</label> <div class="col-xs-6"> <input type="text" ng-model="shipping.address2" class="form-control input-sm"/> </div> </div> <div class="form-group"> <label class="control-label col-xs-3">City</label> <div class="col-xs-6"> <input type="text" ng-model="shipping.city" class="form-control input-sm"/> </div> </div> </fieldset> </form> </div> </body> </html>页面中)一旦表单提交,我想加载一个新页面(test.html),然后页面将显示正在运行的任务的连续更新。

这当前在单个页面上工作,我在表单中使用AJAX在同一页面上提交表单。我想在新页面上实现这一点。以下是我的代码。

test.js

test.html/web1.html

views.py

$('#Submit_button').on('submit',function(event){
    event.preventDefault();
    console.log("form submitted!")  
    call_func();  
}); 

function  call_func() { 
    $.ajax({
       url : "start_task/", // the endpoint
       data:{...,'init':call_func.i}, // call_func.i to iterate 2 times
    headers: {Accept: "application/json"},
    success : function(json) {  
        if(call_func.i==0){
            call_func.i=1;
            call_func();                
        }               
        else ...

html

def start_task(request):
    if request.method == 'POST':
        init = request.POST.get('init')
        print('init =',init)
        if init==0:
            return render(request, 'my_app/web1.html')    
        elif init==1:
            # work on updates
            return HttpResponse(
                json.dumps(response_data),
                content_type="application/json"
            )

如何仅在后一部分使用AJAX(更新新页面)并在提交后首先加载页面?

1 个答案:

答案 0 :(得分:0)

我认为你需要像HttpResponseRedirect而不是HttpResponse:

       if form.is_valid(): # validation
           # Process your data
           # ...
           return HttpResponseRedirect('/new_page_url/')