来自 Django 模板的 Ajax JQuery 请求和响应

Posted 2023-02-24

【中文标题】来自 Django 模板的 Ajax JQuery 请求和响应

【英文标题】：Ajax JQuery request and reponse from Django Template

【发布时间】：2012-01-08 19:20:26

【问题描述】：

根据 jro 的建议，我正在修改我的问题和遇到的问题。

==网址==

url('^$','pMass.views.index', name='index')  #Index is the main view with form input type text and submit
                                             #If search value is match then it will render result.html template

==查看==

#View will find search value and render result.html template if request is not ajax
#If request is ajax then same view will create new queryset and render to same template page (result.html) 

 def index(request):
    error = False
    cid = request.GET

    if 'cnum' in request.GET:
       cid = request.GET['cnum']

    if not cid:
       error = False
       expcount = Experiment.objects.count()
       allmass = SelectedIon.objects.count()

   if request.is_ajax():
       value = request.GET.get('value')
       if value is None:
           result = SelectedIon.objects.filter(monoiso__iexact=value).select_related()
           template = 'result.html'
           data = 
               'results':result,
           
           return render_to_response(template, data,           
          context_instance=RequestContext(request))

    else:

       defmass = 0.000001
       massvalue = float(cid)
       masscon = defmass * massvalue
       highrange = massvalue + masscon
       lowrange = massvalue - masscon

       myquery = SelectedIon.objects.select_related().filter(monoiso__range=(lowrange, highrange))
       querycount = myquery.count()

       return render_to_response('result.html', 'query': cid, 'high':highrange, 'low':lowrange, 'sections':myquery, 'qcount':querycount, )

   return render_to_response('index.html', 'error': error, 'exp': expcount,'mass':allmass,)

==result.html==

# I have divided template into two container: main (left) & container (right)
# Left container is for search match (e.g value/title) with hyperlink
# Right container is for detail of the match value
# For right container I have created jQuery tabs (tab1, tab2, tab3)
# The content of the right container in the tab will update according to the link in the left.
#Layout is given below

               ! tab1  ! tab2 ! tab3 !            
-------------------------------------------------------------------------               
!  434.4456    !  Show Default Match 1 Record                           !
!  434.4245    !  &  left hyperlink onclick show it's value record      !
!  434.4270    !  detail. I have design tab with JQuery                 !
!  434.2470    !                                                        !
!  434.4234    !                                                        !
------------------------------------------------------------------------- 

==左容器(result.html)==

#I am looping through the queryset/list of values that was match with template for tag
#The template variable is given a hyperlink so after clicking it's detail information 
 will be shown on right container

<script type="text/javascript" src="/media/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
    $('#a.id').click(function()
        value = $ ('a.id').val();
        $('div#tab_content')empty().load('%url index%?query'= +value);
        );
    );

<div id="main">
     <table align="center" cellspacing="0" cellpadding="4" border="1" bordercolor="#996600">
          <tr>
              <th>Match</th>
          </tr>     
               % for section in sections %
          <tr>
              <td><a href="#" id="%section.monoiso%">section.monoiso</a></td>
          </tr>
               % endfor %
       </table>
</div>

==问题==

不知道如何获取超链接值！ 超链接（左容器）上的 jQuery ajax 请求不起作用 我不确定从

result.html

加载

index view

是否正确 我正在通过<a href.... id="%section.monoiso%" 的超链接向服务器发送数据，如何使用相同的

id 值

在

索引视图

中进行查询并在结果中进行响应。 html? 如何在正确的容器中呈现响应？

感谢您的建议、cmets 和回答。

【问题讨论】：

有quite some 教程available 当你search 为它。您遇到问题的具体部分是什么？

我已经通过谷歌搜索直到 10 页才在这里提问。您提供的链接对我来说并不陌生。如果我已经解决（理解）了，那么在这里问就没有问题了！

我在右列有来自查询集的关联值的链接列表。单击单个链接后，我想通过在右侧 DIV 列（选项卡分隔）上生成新的查询集来显示它的详细信息。这是我遇到的问题！！！

【参考方案1】：

一些起点。首先，通过 Ajax 调用的视图不一定要返回 json 对象：也可以使用 django.http.HttpResponse（或 render_to_response，归结为同一件事）将数据作为字符串返回。这意味着您也可以像往常一样返回一个完全生成的模板。

假设您发布的视图位于 /index/(?<tab>\d+)/(?<match>\d+)/（tab 是标签索引，match 是匹配索引），您的 javascript 可能如下所示：

$("ul.tabs li").click(function() 
    $("ul.tabs li").removeClass("active");     // Remove any "active" class
    $(this).addClass("active");                // Add "active" class to this tab
    $(".tab_content").hide();                  // Hide all tab content

    // Construct the url based on the current index
    match_name = $("ul.match li").index($("ul.match li.active"));
    url = "/index/" + $("ul.tabs li").index($(this)) + "/" + match_name + "/";

    // Asynchronous ajax call to 'url'
    new $.ajax(
        url: url,
        async: true,
        // The function below will be reached when the request has completed
        success: function(transport)
        
            $(".tab_content").html(transport); // Put data in the div
            $(".tab_content").fadeIn();        // Fade in the active content
        
    );
);

我没有对此进行测试，但应该按照这些思路进行测试。请注意，要使其与您当前的代码一起使用，您查看的 index 函数需要允许一个参数。如果您只想在每个选项卡的相同页面上对其进行测试，请将 URL 设置为：url = "/index/";，这样它很可能会立即生效。

【讨论】：

这次我已经准确地更新了我的问题。将通过您的建议。

我不确定你到底想要什么，但我更新了答案以在 url 中包含匹配索引。

我已经填充了模板（2 列），在左侧我有模板变量循环，它为我提供了带有链接的匹配查询。此外，我想在单个链接点击的右栏中显示匹配查询链接详细信息。匹配值与各种数据模型有关系，这就是为什么要在选项卡中显示它们。对不起，不够清楚！非常感谢您的帮助

请解释您的当前问题是什么。据我所知，发布的 sn-p 将大致执行您想要的操作（保存一些名称或 ID）。调用 Django 视图有问题吗？还是模板渲染不正确？ ajax 回调？还是页面本身的更新？随时使用您在尝试解决问题时遇到的任何其他信息来更新您的问题。

@jro- 这次我已经尽力了，并彻底更新了问题。你能帮帮我吗？