在Django中刷新表单而不重新加载页面

时间:2014-05-31 05:10:21

标签: ajax django

您好我是Ajax和django的新人,我想刷新我的表单。我尝试了一些代码,但它没有用。我确定我想要做的是非常基本的。

这是我的html:

    <div class="row" style="padding-top:20px;">
     <div class="col-md-12" id="testAjax">
      {% load crispy_forms_tags %}
      {% crispy form %}
    </div>
   </div>

我想在div testAjax中刷新我的表单。

我的观点在这里:

def createPin(request):
error = False   
if request.method == "POST":
    form = CreatePinForm(request.POST)
    if form.is_valid():
        pin = form.save(commit=False)
        pin.customer = request.user.customer
                    pin.save()
        msg = "pin saved"
        return redirect('/pin/CreatePin', {'form': form, 'msg': msg})
    else:
        error = True
else:
    form = CreatePinForm()
return render(request, 'createPin.html', {'form': form, 'error': error,})

我的Ajax:

function refresh() 
{
 $form=$('#createPin');
 var datastring = $form.serialize();
    $.ajax({
        type: "POST",
        url: '/pin/CreatePin/',
        dataType: 'html',
        data: datastring,
        success: function(result)
        {
            /* The div contains now the updated form */
            $('#testAjax').html(result);
        }
    });

}

非常感谢您的帮助。

1 个答案:

答案 0 :(得分:2)

当我需要做一些操作并且我不想重新加载页面时我使用对Ajax的JQuery调用,我在AJAX中进行相关操作,然后在JQuery函数中接收AJAX响应而不离开或重新加载页。我将在这里为您提供一个简单的例子,让您了解其基本知识:

JQuery函数,放在你需要的模板中

function form_post(){       
    //You have to get in this code the values you need to work with, for example:
    var datastring = $form.serialize();

    $.ajax({  //Call ajax function sending the option loaded
      url: "/ajax_url/",  //This is the url of the ajax view where you make the search 
      type: 'POST',
      data: datastring,
        success: function(response) {
            result = JSON.parse(response);  // Get the results sended from ajax to here
            if (result.error) { // If the function fails
                // Error
                alert(result.error_text);
            } else {  // Success

                    //Here do whatever you need with the result;                                                  
                } 
            }
        }
    });              
    }

你必须意识到我无法在不知道你得到什么样的结果或者你想如何显示它们的情况下完成代码,因此你需要根据需要修饰这些代码。

JQuery调用的AJAX函数

请记住,您需要在urls.py中为此Ajax函数添加一个url:

url(r'^/ajax_url/?$', 'your_project.ajax.ajax_view', name='ajax_view'),

然后你的AJAX函数,它就像一个普通的Django View,但是将这个函数添加到django.core.context_processors的ajax.py中从django.views.decorators.csrf导入csrf从django.utils导入csrf_exempt导入simplejson

@csrf_exempt
def ajax_view(request):    
    response = []
    #Here you have to enter code here 
    #to receive the data (datastring) you send here by POST       
    #Do the operations you need with the form information
    #Add the data you need to send back to a list/dictionary like response
    #And return it to the JQuery function `enter code here`(simplejson.dumps is to convert to JSON)
    return HttpResponse(simplejson.dumps(response))

因此,在不离开您通过javascript接收的页面的情况下,您会从ajax视图中发送一个项目列表。

因此,您可以使用JQuery

更新表单或任何标记

我知道这一开始可能会让人感到困惑,但是一旦习惯了AJAX,这种操作无需离开或重新加载页面就很容易了。

理解的基础是:

  1. 在点击或任何您需要的事件上调用JQuery函数
  2. JQuery在模板上获取一些值并通过它们发送给AJAX POST
  3. 通过POST
  4. 在AJAX中接收该信息
  5. 像在正常的DJango视图中一样,在AJAX中做任何你需要的事情
  6. 将结果转换为JSON并发送回JQuery函数
  7. JQuery函数从AJAX接收结果,你可以这样做 无论你需要什么