如何发送 Javascript object 在 Django 后端处理

Question

我问过这个问题，但我发现它有点复杂。 我在这里简化了问题。 我正在用 javascript API 进行支付处理。我得到了结果，但我想将它发送到 Django 后端进行处理。 我不太熟悉这个 Javascript/Django 交互，因此我的问题。 以下是文件。

Subscription.py这是一个简单的页面，允许用户选择他们的订阅。

@csrf_exempt
@login_required(login_url='login')
def subscription(request):
    user = request.user
    user_organization = OrganizationUser.objects.get(user=user)
    company = Company.objects.filter(name = user_organization.organization.name).first()
    today = datetime.date.today()
    form = CompanyForm(request.POST)
    subscription = Subscription.objects.all()

    if user_organization.is_admin == True:

        context = {'user_organization': user_organization, 'form': form, 
                'subscription': subscription, 'company': company, 'today': today,}
        return render(request, 'registration/subscription.html', context)
    else:
        return HttpResponse('You are not authorised to view this page')

这里是对应的Subscription.html

{% block content %} 


<div class="columns is-centered">

   <div class="column is-5 box">
  
    {% if company.paid_till < today %}
    <form action="" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="content">
      
      <h1 class="title is-4">
          <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
          Account is not active
      </h1>
      Your company <strong>{{user_organization.organization}}</strong> is not active. Please renew the subscription.<br>
    </div>
    {% else %}
    
    <p class="label">We have great subcription options for you. Choose from our list either for monthly or annual plans</p><br>

    {% endif %}
    <h2>Subscription Packages</h2><br>
    <div class="select"> 
      <select
        name="search"
        hx-get="{% url 'searched-subs' %}"
        hx-target="#searched-subs"
        hx-trigger="change"
        hx-swap="innerHTML"
        onchange="updateButtonDataAmount(event)"
      >
      <option value="select-a-plan">Select A Plan</option>
      <option value="7.99">Starter - Monthly ($7.99/Month)</option>
      <option value="79.00">Starter - Annually ($79.00/Year)</option>
      <option value="49.90">Business - Monthly ($49.90/Month)</option>
      <option value="499.00">Business - Annually ($499.00/Year)</option>
      </select>
    </form>
    </div><br><br>

    <div id="searched-subs"></div><br><be>
    
    <button class="intaSendPayButton button is-btn-mycolor is-fullwidth" 
    data-amount="10" 
    data-currency="KES" 
    data-email="joe@doe.com" 
    data-first_name="JOE" 
    data-last_name="DOE" 
    data-country="KE">
    Pay Now
    </button><br>
  
    </div>
    </div>

<script>


  new window.IntaSend({
    publicAPIKey: "publishing-key",
    live: false //set to true when going live
  })
  .on("COMPLETE", (results) => console.log("Payment in COMPLETE status", results))
  .on("FAILED", (results) => console.log("Payment in FAILED status", results))
  .on("IN-PROGRESS", (results) => console.log("Payment in progress status", results))
  </script>
  {% endblock %}

该代码运行良好，并将付款事件的结果打印到控制台。 我需要一种与上面订阅视图中的“结果”交互的方法，以便能够处理付款事件。 我尝试了几种方法，但我认为我缺少一些东西。

Answer 1

一般来说，当你需要从浏览器向服务器发送一些数据时，你会想要发出 HTTP 请求。 在 Django 端 - 您编写常规视图（请求处理程序）将接收请求，从中获取数据并用它做一些事情（假设有用）。 在 Javascript 端 - 您编写一些代码来发出请求和您需要的数据。 阅读有关在浏览器中使用 XMLHTTPRequest 或更现代的 fetchAPI 的信息，这应该可以帮助您入门。 MDN 和 w3schools 是很好的学习资源：

https://www.w3schools.com/js/js_ajax_intro.asp

https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API