如何使用 ajax 从 Django 模板中的搜索框结果导航到新的 link？

Question

我正在用 Django 创建一个聊天应用程序。我正在使用 ajax 在输入框中键入每个字符后显示搜索结果。它工作正常。但是现在我想在搜索结果中添加 link（这只是一个名称），这样如果我单击其中一个搜索结果，它就会转到 link 和 views.chat_from_search在我处理创建聊天和呈现页面的所有逻辑的地方调用。我尝试添加一个事件侦听器，然后重定向到新的 link （我尝试添加 link 的代码在 ** ** 标签内）但它导致了这个错误 'chatSearch' 的反转，未找到参数“(”,)“。尝试了 1 种模式：['chat/search/(?P<chat_user_name>[^/]+)/\Z'] 我的 ajax 搜索代码和我创建保存搜索结果的 div 的代码（以及我添加 link 的失败尝试）在 sendSearchData 中（如下所示）。 ajax return 是一个只有用户名属性的对象数组。这是对象的结构（我正在创建它并将其附加到我 return）

的列表中

indiv_user = {
                    'name': user.username,
                }



const sendSearchData = (contact_name) => {
  $.ajax({
    type: 'POST',
    url: '/search/',
    data:{
      'csrfmiddlewaretoken': csrf,
      'contact_name': contact_name,
    },
    success: (res) =>{
      const data = res.data;
      document.getElementById('search_result_box').innerHTML = ""
      if (Array.isArray(data)){

        data.forEach(contact => {
          document.getElementById('search_result_box').innerHTML  +=
            " <div id ='"+contact.name+"'class='search-person'><h5 class='search-name'>"+contact.name+"</h5></div>";

          **document.getElementById(contact.name).addEventListener('click',function(){
            location.href= "{% url 'chatPage:chatSearch' contact.name %}"
          });**
        });

      }
    },
    error: (err)=>{
      console.log(err)
    }
  })
}

我的urls.py是

from django.urls import path
from chatPage import views
app_name = "chatPage"
urlpatterns = [
    path('', views.homepage, name='homepage'),
    path('chat/<int:chatID>/', views.home, name='chat'),
    path('chat/search/<str:chat_user_name>/', views.chat_from_search, name='chatSearch'), #noqa
    path('search/', views.search_result, name='search')
]

谁能告诉我为什么这不起作用？另外，如何在从 ajax 获得结果后在 div 中添加 link ，或者我应该以不同的方式处理这个问题？我已经尝试解决这个问题 2 天了，我们将不胜感激。非常感谢。

Answer 1

在 Djano 首次交付页面之前评估模板格式化语言（例如 {{ code }} 和 {% code %} 部分）。它无法在页面传送到浏览器后对其进行评估，因此无法获取您的 ajax 结果并对其进行格式化。您得到的错误是因为它试图在用户获得页面之前执行评估，因此它没有 contact.name 可供使用。

您必须以不同的方式构建您的 URL，使用 ajax 数据和单独使用 javascript。值得庆幸的是，URL 构造在这种情况下看起来很简单，并且您已经有了必要的变量，因此您应该能够使用类似

的东西

location.href= "/chat/search/" + contact.name

另一种选择是更新您的 post 请求以将聊天搜索 URL 作为响应的一部分，例如，

 contact { "name": user.name,
           "url" : reverse('chatsearch', kwargs={"chat_user_name": user.username]
         }

那你可以直接参考

location.href= contact.url

如何使用 ajax 从 Django 模板中的搜索框结果导航到新的 link？

How to navigate to a new link from the search box results in Django template with ajax?

javascript

jquery

python-3.x

django

ajax