Javascript 使django html表单在提交时执行2个操作_Javascript_Python_Html_Django

Javascript 使django html表单在提交时执行2个操作

javascript python html django

Javascript 使django html表单在提交时执行2个操作,javascript,python,html,django,Javascript,Python,Html,Django,我正在开发一个django web应用程序，有一个html表单，提交表单时我需要做两件事：在应用程序的数据库中创建一个记录，并将收集到的一些值发布到另一个网站（例如支付网站）我遇到的问题是让表单同时做这两件事。我知道一个HTML表单只能有一个操作，我在StackOverflow上读过一些关于使用javascript让表单执行两个或多个操作的帖子，但到目前为止，我尝试的所有方法都无法解决这种情况。他们似乎只有一个动作起作用这就是我的django模板现在的样子： {% extends "some

我正在开发一个django web应用程序，有一个html表单，提交表单时我需要做两件事：在应用程序的数据库中创建一个记录，并将收集到的一些值发布到另一个网站（例如支付网站）

我遇到的问题是让表单同时做这两件事。我知道一个HTML表单只能有一个操作，我在StackOverflow上读过一些关于使用javascript让表单执行两个或多个操作的帖子，但到目前为止，我尝试的所有方法都无法解决这种情况。他们似乎只有一个动作起作用

这就是我的django模板现在的样子：

{% extends "some other template" %}
{% block content %}
<div>
...
<form id=form1" name="trans_form" method="POST" >
...
<!--DATA TO POST TO PAYMENT SITE-->
<input type="hidden" name="transaction_id" value="some value" />
<input type="hidden" name="transaction_amount" value="some value"/>
<input type="hidden" name="customer_id" value="some value" />
<input type="hidden" name="customer_name" value="some value" />
<!--DATA TO POST TO PAYMENT SITE-->
...
<!--DATA TO POST TO APP DATABASE-->
<input type="hidden" name="user" value="{{ user.id }}">
<input type="hidden" name="type" value="CC">
<input type="hidden" name="ref_no" value="{{ ref_no }}">
Amount: <input type="text" name="amount" id="id_amount" required />
Ref ##: <span>{{ ref_no }}</span>
Date: <span>{{ cur_date|date:'d/m/Y' }}</span>
<a href="#" id="pay-btn" class="button" onclick="submitForm();">Submit</a>
<!--DATA TO POST TO APP DATABASE-->
...
</form>
...
</div>
{% endblock %}

{% block script %}
<script>
function submitForm()
{
    createRecord(document.forms["trans_form"]);
    sendToPay(document.forms["trans_form"]);
}
function sendToPay(f)
{
    f.action= "www.paymentsite.com";
    f.target = null;
    f.onsubmit = null;
    f.submit();
}
function createRecord(f)
{
    f.action = "url to view that creates the record in database";
    f.target = "_blank";
    f.onsubmit = null;
    f.submit();
}
</script>
{% endblock %}

{%extensed“some other template”%}
{%block content%}
...
为什么不直接从您的控制器发布到支付网站：
def handle_payment(request):
    post_to_payment_site(request)
    write_payment_info_to_db(request)

def post_to_payment_site(request):
    data = {'transaction_id': request.form['transaction_id',
        # etc.
    }

    requests.post('payment-provider-url', data=data)

如果您无法接受针对您的支付提供商的POST数据，则您可以执行以下操作之一：

向您的支付提供商发送XHR请求-这要求您的支付提供商为您要发布到的端点正确实施CORS。当该请求完成时，您可以正常提交表单
将表单的target
属性更改为指向iframe
或新选项卡/窗口。然后，当加载iframe
时，删除target
属性，将操作切换回端点并提交

为什么不直接从控制器发送到支付网站：
def handle_payment(request):
    post_to_payment_site(request)
    write_payment_info_to_db(request)

def post_to_payment_site(request):
    data = {'transaction_id': request.form['transaction_id',
        # etc.
    }

    requests.post('payment-provider-url', data=data)

如果您无法接受针对您的支付提供商的POST数据，则您可以执行以下操作之一：

向您的支付提供商发送XHR请求-这要求您的支付提供商为您要发布到的端点正确实施CORS。当该请求完成时，您可以正常提交表单
将表单的target
属性更改为指向iframe
或新选项卡/窗口。然后，当加载iframe
时，删除target
属性，将操作切换回端点并提交

我终于解决了我的问题。我不确定这是否是最有效的解决方案，但它就在这里
我又制作了一个HTML页面，作为我的应用程序和支付网站之间的中间人。这是一个非常简单的页面，实际上是第一个表单页面的复制品，但只包含要发布到支付站点的必需字段。这样，就不需要太多JavaScript。提交表单会在应用程序数据库中创建一条记录，将所需数据发送给“中间人”，然后由“中间人”将数据发布到支付网站。在整个过程中，用户从未真正看到中间人
正如我所说，这可能不是最有效的解决方案，但效果很好
首先，下面是views.py的代码：
def write_payment_info_to_db(request):
dt = datetime.now()
form = Form()
err = False
if request.method == 'POST':
    #Collect data to send to GTPay
    transaction_id      = request.POST['transaction_id']
    transaction_amount  = request.POST['transaction_amount']
    customer_id         = request.POST['customer_id']
    customer_name       = request.POST['customer_name']
    #Create record in db for "valid" form data
    form = Form(request.POST)
    if form.is_valid():
        form.save()
        return render_to_response('middleman.html', {'transaction_id': transaction_id,
                                                    'transaction_amount': transaction_amount,
                                                    'customer_id': customer_id,
                                                    'customer_name': customer_name},
                                    context_instance=RequestContext(request))
    else:
        err = form.errors
        return ...
else:
    return ...

这是中间人：
<html>
<body onload="document.submit2paymentsite_form.submit()">
    <form name="submit2paymentsite_form" action="payment-provider-url" target="_self" method="POST">
        {% csrf_token %}
        <input type="hidden" name="transaction_id" value="{{ transaction_id }}" />
        <input type="hidden" name="transaction_amount" value="{{ transaction_amount }}" />
        <input type="hidden" name="customer_id" value="{{ customer_id }}" />
        <input type="hidden" name="customer_name" value="{{ customer_name }}" />
    </form>
</body>


{%csrf_令牌%}

我终于解决了我的问题。我不确定这是否是最有效的解决方案，但它就在这里
我又制作了一个HTML页面，作为我的应用程序和支付网站之间的中间人。这是一个非常简单的页面，实际上是第一个表单页面的复制品，但只包含要发布到支付站点的必需字段。这样，就不需要太多JavaScript。提交表单会在应用程序数据库中创建一条记录，将所需数据发送给“中间人”，然后由“中间人”将数据发布到支付网站。在整个过程中，用户从未真正看到中间人
正如我所说，这可能不是最有效的解决方案，但效果很好
首先，下面是views.py的代码：
def write_payment_info_to_db(request):
dt = datetime.now()
form = Form()
err = False
if request.method == 'POST':
    #Collect data to send to GTPay
    transaction_id      = request.POST['transaction_id']
    transaction_amount  = request.POST['transaction_amount']
    customer_id         = request.POST['customer_id']
    customer_name       = request.POST['customer_name']
    #Create record in db for "valid" form data
    form = Form(request.POST)
    if form.is_valid():
        form.save()
        return render_to_response('middleman.html', {'transaction_id': transaction_id,
                                                    'transaction_amount': transaction_amount,
                                                    'customer_id': customer_id,
                                                    'customer_name': customer_name},
                                    context_instance=RequestContext(request))
    else:
        err = form.errors
        return ...
else:
    return ...

这是中间人：
<html>
<body onload="document.submit2paymentsite_form.submit()">
    <form name="submit2paymentsite_form" action="payment-provider-url" target="_self" method="POST">
        {% csrf_token %}
        <input type="hidden" name="transaction_id" value="{{ transaction_id }}" />
        <input type="hidden" name="transaction_amount" value="{{ transaction_amount }}" />
        <input type="hidden" name="customer_id" value="{{ customer_id }}" />
        <input type="hidden" name="customer_name" value="{{ customer_name }}" />
    </form>
</body>


{%csrf_令牌%}

f.action=
对于您的sendToPay
函数，可能应该在www
之前包含https://
。f.action=
对于sendToPay
函数，可能应该在www
之前包含https://
。谢谢您的建议。我能够配置write_payment_info_to_db函数，这很好。但是，按照您的建议设置post_to_payment_站点功能会导致类型错误“QueryDict对象不可调用”。我在最后一行使用了“request.POST（'payment-provider-url'，data=data）”，这就是错误的异常位置。@debodunmcg-这是请求
，而不是请求
；-）我假设您可以访问[第三方请求库]（docs.python Requests.org）。您也可以使用urllib
，只需再编写几行代码即可。对不起，我应该说清楚的！没问题，肖恩。我无法访问支付网站的请求库，但我有一个可行的解决方案。我制作了一个HTML页面，它就像我的表单和支付网站之间的中间人。因此，在提交表单时，将在我的应用程序数据库中创建记录，支付网站所需的相关数据将发送到中间人HTML页面，并在加载时将数据提交到支付网站。这样做的好处是用户永远无法看到中间人。可能不是最好的解决方案，因为它需要一个额外的跃点，但它可以工作。：-）谢谢你的建议。我能够配置write_payment_info_to_db函数，这很好。但是，按照您的建议设置post_to_payment_站点功能会导致类型错误“QueryDict对象不可调用”。我在最后一行使用了“request.POST（'payment-provider-url'，data=data）”，这就是错误的异常位置。@debodunmcg-这是请求
，而不是请求
；-）我假设您可以访问[第三方请求库]（docs.python Requests.org）。您也可以使用urllib
，只需再编写几行代码即可。对不起，我不知道