如何在Django模板中使用Ajax？

Question

How to use Ajax in Django-templates?

urls.py

from django.conf.urls import patterns, url

urlpatterns = patterns('',
    url(r'^home/$', 'views.index'),)

views.py

from django.template import RequestContext
from django.shortcuts import render_to_response

def index(request):

    val = request.POST.get('val', default='text_text')
    return render_to_response(
            'index.html',
                            {'text': val,},
                            context_instance=RequestContext(request))

index.html

<p>text and pictures</p>
<p>text and pictures</p>

<h1>{{ text }}</h1>

<form action="/home/" method="post">
{% csrf_token %}
<input type="text" name="val" id="val" value="{{ val }}"/> <br/>
<input type="submit" value="OK" />
</form>

<p>text and pictures</p>
<p>text and pictures</p>

How can I do that when you press the OK button updates only part of the page between the tags h1 ?

Answer 1

This is how I handle it in Flask, but since you are working with Django it will be easy to fit the code.

Server: import jsonify

@app.route("/_jquerylink")
def jquerylink():
    val = request.POST.get('val', default='text_text')
    return jsonify(text=val)

Client-side:

<div id="partwithh1"><h1>{{ text }}</h1></div>

<form action="/home/" method="post">
  {% csrf_token %}
  <input type="text" name="val" id="val" value="{{ val }}"/> <br/>
  <input type="submit" onclick="getviews(this)" value="OK" />
</form>

    <script type="text/javascript">

        $(function getviews() {

            var content = $(#val).text();
            $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
            $.getJSON($SCRIPT_ROOT + '/_jquerylink', 
                    {'val':content}
                ,
                function(data) {
                    $("#partwithh1").html(data.text);
                });
            return false;
            });

     </script>