Javascript 如何在一个Django视图中添加多个表单_Javascript_Jquery_Ajax_Django

Javascript 如何在一个Django视图中添加多个表单

javascript jquery ajax django

Javascript 如何在一个Django视图中添加多个表单,javascript,jquery,ajax,django,Javascript,Jquery,Ajax,Django,我正在制作一个web应用程序，在其中的一个页面中，用户可以在表单中输入艺术家、城市、州和英里半径的名称，并从api调用返回JSON响应，并在服务器端进行解析。然后，我将此解析数据作为上下文变量传递回客户机，以便在返回的每个音乐会事件的列表中显示为元素。在每个列表元素（或每个音乐会）中，都有一个按钮，可以单击该按钮，允许用户通过smtp向某人发送音乐会邀请。这个按钮点击是一个事件，应该做两件事它必须在按钮中嵌入数据，并通过ajax调用将数据发送到服务器端在页面上打开一个模式，用户可以在其中指定

我正在制作一个web应用程序，在其中的一个页面中，用户可以在表单中输入艺术家、城市、州和英里半径的名称，并从api调用返回JSON响应，并在服务器端进行解析。然后，我将此解析数据作为上下文变量传递回客户机，以便在返回的每个音乐会事件的列表中显示为元素。在每个列表元素（或每个音乐会）中，都有一个按钮，可以单击该按钮，允许用户通过smtp向某人发送音乐会邀请。这个按钮点击是一个事件，应该做两件事

它必须在按钮中嵌入数据，并通过ajax调用将数据发送到服务器端

在页面上打开一个模式，用户可以在其中指定他们希望在电子邮件中输入的信息。然后，这些数据将添加到服务器端的ajax调用中

虽然我似乎对此有一般的结构，但问题是似乎没有办法将多个表单映射到一个Django视图。我目前用于最初获取用户对api调用的输入的表单只是通过在视图中创建表单对象的实例来创建的，该实例对应于页面的模板。在这种情况下，我不确定是否有可能使模态在同一页中分开

单击按钮输入要发送到电子邮件中的数据，然后返回到原始页面的最佳方式是什么？我愿意接受任何重构代码的建议

以下是创建列表所需的代码以及ajax调用所需的代码（在模板中）：

var场馆={{场馆|安全}；
变量日期={raw|dts | safe}；
var ticket_statuses={{ticket_statuses}安全}；
var ticket_url={{ticket_url | safe}；
console.log（“艺术家名单长度”+场馆长度）；
var$list=$（“”）；
对于（变量i=0；i<1.length；i++）{
$list.append（“艺术家：{form_artistSelect}}地点：“+场馆[i].城市+”，“+场馆[i].地区+”场馆：“+场馆[i].名称+
“日期：“+日期[i]+”票证状态：“+票证状态[i]+”
“+
{{%如果user.u已通过身份验证%}
“邀请朋友保存音乐会”+
{{%endif%}}
“”；
}
$（“#邀请”）。单击（函数（）{
var-raw_-dt；
var rec_email；//必须从模式
var message；//必须从模式
var rec_name；//必须从模式
var-ticket\u-url；
var地点；
原始数据=美元（本）.attr（“日期”）；
地点=$（本）.attr（“地点”）；
票证url=$（this.attr（“票证url”）；
$.ajax({
url：您的url，
方法：“POST”，
数据：{
}
成功：功能（数据）{
}
});
});

编辑：第一个表单的html代码：

<body id = "top">

<form id = "search" method= 'POST' action = ''>{% csrf_token %}
{{ form|crispy }} 

<input type= 'submit' value= 'Submit'>
</form><br>


{%csrf_令牌%}
{{form | crispy}}

模式的html代码：

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Invitation</h4>
      </div>
      <div class="modal-body">

        <div id="container">  </div>
            <form id = "search" method= 'POST' action = ''>{%csrf_token %}
            {{ form|crispy }} 
            <input type= 'submit' value= 'Submit'>
            </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>


&时代；
邀请
{%csrf_令牌%}
{{form | crispy}}
接近

我可能误解了您的意图，但您可以在django视图中添加任意数量的表单，只要它们都在模板中的同一

元素中呈现；我看不出在一个视图中哪里需要多个表单。@DanielRoseman抱歉，我忘了为两个表单添加代码。我现在已经更新了帖子。@ShangWang如果每个表单的forms.py中有不同的对象，我如何将模板中的每个表单映射到相应的表单对象？嗯，在将表单对象传递到模板之前，您肯定需要给每个表单对象一个名称，不是吗？就像你有一个

表单a=FormA（）

和

表单b=FormB（）

，然后在上下文中给每个对象命名：

c=context（{'form\u a'：form\u a，'form\u b'：form\u b}）

。如果您不确定我在说什么，请阅读文档的这一部分：

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Invitation</h4>
      </div>
      <div class="modal-body">

        <div id="container">  </div>
            <form id = "search" method= 'POST' action = ''>{%csrf_token %}
            {{ form|crispy }} 
            <input type= 'submit' value= 'Submit'>
            </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>