jquery - django 和 jQuery - 内联删除和记录更新

Question

我是 django 新手，遇到了一些困难。我有一个包含多条(数百条)记录的表。

我想使用 jQuery 来启用记录的内联更新和删除。

HTML:

<p>The current candidate list is:</p>
    <div id="display1">
        <span>
          <button class="delete_button" id="1">del</button>
        </span>
        <span style="width:50px;">
          <button class="editdiv" id="1">EDIT</button>
        </span>
        <span>
            <a href="/candidates/1/">jake wilmott</a>
        </span>
        <span>
            de vere 
        </span>
        <span>
            Nepal 
        </span>
        <span>
            hands off 
        </span>
        <span>
            connected 
        </span>
        <span>
            nice guy 
        </span>
    </div>
    <div class="noshow" id="edit1">
        <span style="width:100px;"><button class="update" id="1">update</button></span>
        <span>
            jake wilmott
        </span>
        <span style="width:220px;">
            <input class="company" type="textfield" style="width:210px;" id="new_company1" value="de vere" />
        </span>
        <span>
            <input type="text" id="new_country1" value="Nepal" />
        </span>
        <span>
            <select id="new_status1">
                <option value="no contact">no contact</option>
                <option value="hands off">hands off</option>
                <option value="ongoing">ongoing</option>
                <option value="sent email">sent email</option>
                <option value="waiting">waiting</option>
                <option value="trash">trash</option>
            </select>
        </span>
        <span>
            <input type="text" id="new_connection" value="connected" />
        </span>
        <span style="width:220px;">
            <input type="textfield" style="width:210px;" id="new_notes" value="nice guy" />
        </span>
    </div>

jQuery 函数是:

//delete
<script>
    $(document).ready(function() {
        $(".delete_button").click(function() {
            alert('delete script')
            var id = $(this).attr('id');
            alert(id)
            $.ajax({
                type: "POST",
                 url: "/candidates/",
                data: { id:id },
                success: function(response){
                    alert(response);
                }
            });
            return false;
        });
    });
</script>

alert('delete script') 警报，alert(id) 也是如此。但后来它崩溃了，什么也没有发生

更新的 jQuery 是:

<script>
    $(document).ready(function() {
        $('.update').click(function() {
            alert('script now')
            var id = $(this).attr('id');
            var company = $("#new_company" + id).val()
            var country = $("#new_country" + id).val()
            var status =  $("#new_status" + id).val()
            alert(status)
            $.post('/candidates/' + id + company + country + status + '/', function() {
                alert('to here')
                //$this.replaceWith("<span class='success'>Liked</span>");
                jQuery(data["html"]).appendTo(".success");
            });
        });
    });
</script>

再次，alert('script now') 和 alert(status) 都尽职尽责地发出警报，然后再次崩溃。

urls.py 是:

from django.conf.urls import patterns, include, url

urlpatterns = patterns('',
    # Examples:
    url(r'^candidates/$', 'candidates.views.index'),
    # url(r'^$', 'amore.views.index', name='index'),
    url(r'^candidates/(?P<id>\d+)/$', 'candidates.views.detail'),
    url(r'^candidates/(?P<id>\d+)/$', 'candidates.views.delete'),
    url(r'^update/(\d+)/$','candidates.views.update'),

views.py 是:

from django.template import Context, loader
from candidates.models import Candidates
from django.http import HttpResponse
from django.shortcuts import render_to_response, get_object_or_404

def index(request):
    return HttpResponse("Hello, world. You're at the candidate index.")

def index(request):
    data = Candidates.objects.all()[:5]
    t = loader.get_template('candidates/index.html')
    c = Context({
        'data': data,
    })
    return HttpResponse(t.render(c))

def update(request, id):
    candidate = Candidates.objects.get(pk = id)
    candidate.company = request.POST.get('company')
    candidate.country = request.POST.get('country')
    candidate.status = request.POST.get('status')
    candidate.notes = request.POST.get('notes')
    candidate.save()
    return HttpResponse('updated')

def delete(request, id):    
    candidate = Candidates.objects.get(pk = id)
    candidate.delete()
    return HttpResponse('this record has been deleted')

def detail(request, id):
    p = get_object_or_404(Candidates, pk=id)
    return render_to_response('candidates/detail.html', {'Candidates': p})

我已经用谷歌搜索了数百页，但我就是无法解决这个问题。

所以:

1. 我做错了什么？
2. jQuery 脚本中的 URL 应该是什么来将变量传递给 views.py
3. urls.py 文件正确吗？

请帮我让它工作!

Answer 1

对于 jQuery，您需要以 JSON 形式返回答案，而不是 HTML。

def delete(request):    
    candidate = Candidates.objects.get(pk = int(request.REQUEST['id']))
    candidate.delete()
    payload = {'success': True}
    return HttpResponse(json.dumps(payload), content_type='application/json')

jquery 删除示例

 //delete
 <script>
 $(document).ready(function() {
    $(".delete_button").click(function() {
        alert('delete script')
        var id = $(this).attr('id');
        alert(id)
        $.ajax({
            type: "POST",
            url: "/candidates/delete/",
            data: { id:id },
            success: function(response){
                alert(response.success);
            }
        });
        return false;
    });
});

在 urls.py 中

url(r'^candidates/delete/$', 'candidates.views.delete'),