javascript - 使用 Jquery 返回许多要在 html 中更新的值

Question

我想不出一个好的标题来描述我想弄明白的东西，但我这里有这段代码

$(document).ready(function() {
    setInterval(function(){
        $.get('/battleship/update_game/{{info.gameid}}/{{user.username}}', function(data){
           //All Html elements to be updated
        });
    },3000);
    });

这个想法是它发送一个信息请求，然后取回多个值，即一个信息数组。我不知道该怎么做。我也在使用 Django，所以我返回“数据”的方法是

return HttpResponse(myinformation)

我想说的是

return HttpResponse([info1,info2,info3,info4])

然后能够从 javascript 访问这些值

Answer 1

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

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

function form_post(){       
    //You have to get the data from any tag in the template
    var var1 = $('#yourelement').val()
    //or get them using django variables
    var var2 = "{{django_variable}}"
    var data = []  // Create a list if you need to send multiple values
    data.push(var1)
    data.push(var2)
    $.ajax({  //Call ajax function sending the data you need
      url: "/ajax_url/",  //This is the url of the ajax view where you make the search 
      type: 'POST',
      data: "data="+data
        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'),

your_project.ajax.ajax_view 这意味着您需要一个名为 ajax.py 的文件，位于与 views.py 相同的文件夹中

然后是你的 AJAX 函数，它就像一个普通的 Django View ，但是将这个函数添加到 ajax.py 中

from django.core.context_processors import csrf 
from django.views.decorators.csrf import csrf_exempt 
from django.utils import simplejson

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

因此，无需离开页面，您就可以通过 javascript 收到您从 ajax View 发送的项目列表。

因此您可以使用 JQuery 更新您需要的任何标签

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

理解的基础是这样的:

1. 在点击或您需要的任何事件时调用的 JQuery 函数
2. JQuery 在模板上获取一些值并通过以下方式将它们发送到 AJAX邮寄
3. 通过 POST 在 AJAX 中接收该信息
4. 像普通的 DJango View 一样在 AJAX 中做任何你需要的事
5. 将结果转换为 JSON 并发送回 JQuery 函数
6. JQuery 函数从 AJAX 接收结果，你可以这样做无论你需要什么

提示 当您将变量发送到 AJAX 时，您需要知道您发送的值将被转换为字符串。您将通过 POST 在 AJAX View 中收到字符串。当您在 AJAX View 中创建响应以将其发送回模板中的 JQuery 时，您也需要将数据转换为 json，正如您在 ajax 函数 return HttpResponse(simplejson.dumps(response )) simplejson.dumps() 将数据转json