将ajax与django集成答案

【问题标题】：Integrating ajax with django将ajax与django集成
【发布时间】：2016-03-09 00:29:12
【问题描述】：

我正在尝试学习如何将 ajax 与 django 集成。当我单击按钮时，javascript 函数 change() 将按钮的内容更改为“X”，然后评估 ajax。但是控件不会在按钮单击时从客户端传递到服务器端，因为 ajax 既不返回成功也不返回失败。我被 ajax 困住已经两天了。完整代码如下：

网址文件：

from django.conf.urls import include, url
from django.contrib import admin
from game import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^handler/',views.index,name='index'),
    url(r'^$',views.home,name='home'),
]

查看文件：

    from django.shortcuts import render
from django.http import HttpResponse
from django.http import Http404
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def index(request):
    print "xyx"
    if request.method == 'POST':
        return HttpResponse("sucess")
    else:
        return HttpResponse("failure")
@csrf_exempt
def home(request):
    context = {}
    return render(request,"game/home.html",context)

home.html 文件：

<head>
<head>
<script>
function change()
{   
    var y = document.getElementById("one");
    y.value = 'X';
    $.ajax({
        url:"127.0.0.1:8000/handler/",
        type:"POST",
        data:{},
        cache:false,
        success:function(data) {
            var x = document.getElementById(data);
            x.value = 'O';
            alert("sucess");
        },
        error:function(error) {
            alert(error);
        }
    });
}
</script>
</head>
<body>
<input type = "button" id = "one" onclick="change()"></input>
</body>
</html>

控制台输出：

(django)shivam@shivam-HP-Pavilion-15-Notebook-PC:~/Python/django/django/django_test$ python manage.py runserver
Performing system checks...

System check identified no issues (0 silenced).
December 05, 2015 - 18:48:10
Django version 1.9, using settings 'django_test.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
[05/Dec/2015 18:48:16] "GET / HTTP/1.1" 200 453

【问题讨论】：

标签： javascript jquery ajax django

【解决方案1】：

您的函数index 不返回任何http 响应。就在print 返回一个 JsonResponse 之后。此外，所有邮寄电话都必须以斜杠结尾。如果您遇到与客户端相关的任何此类问题，请检查控制台，您会找到原因。

已编辑：

问题是您没有在 html 中包含 jquery。我已经包含了 jquery，而不是绝对 url，我使用了相对 url。唯一的问题是没有 id 为data 的元素。解决这个问题，你会很高兴的。 :)

<head>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
function change()
{   
    var y = document.getElementById("one");
    y.value = 'X';
    $.ajax({
        url:"/handler/",
        type:"POST",
        data:{},
        cache:false,
        success:function(data) {
            var x = document.getElementById(data);
            x.value = 'O';
            alert("sucess");
        },
        error:function(error) {
            alert(error);
        }
    });
}
</script>
</head>
<body>
<input type = "button" id = "one" onclick="change()"></input>
</body>
</html>

【讨论】：

我现在返回一个 httpresponse 但同样的问题仍然存在。
你能粘贴你的控制台输出吗？
我已经更新了答案。用我的代码替换你的代码，你就可以开始了。干杯。
这有帮助..非常感谢.. :)

【解决方案2】：

您需要在 ajax 调用中将/ 附加到您的网址：

$.ajax({
    url:"127.0.0.1:8000/handler/",
    type:"POST",
    data:{},
    . . .

【讨论】：

我改了，但问题还是一样。