Question

是否可以将数据从Cordova发送到Joomla网络表单然后提交表单？

我无法将表单加载到应用程序并发送，因为＆＃34;无效令牌＆＃34;问题。

我需要javascript代码的帮助，我在下面的解决方案是不完整但我认为我正朝着正确的方向前进。

<script>
    function UpdateRecord() {
        var name = $("[name='name']").val();
        var subject = $("[name='subject']").val();
        var select-choice-1']").val() = $("[name='select-choice-1']").val();
        var textarea = $("[name='textarea']").val();
        var file = $("[name='file']").val();

        jQuery.ajax({
            type: "POST",
            url: "http://website.com/send-form",
            data: "name="+ name+"& subject="+ subject+"& select-choice-1="+ select-choice-1+" & textarea="+ textarea+"+" & file="+ file+",
            dataType: "html",      
            cache: false,
            success: function(response) {
                alert("Email Sent");
            }
        });
    }
</script>

javascript的结尾

// form on app 
<form>
    <div class="ui-field-contain">
        <label for="text-basic">Text input:</label>
        <input type="text" name="name" id="text-basic" value="">
    </div>

    <div class="ui-field-contain">
        <label for="text-basic">Text input:</label>
        <input type="text" name="subject" id="text-basic" value="">
    </div>

    <div class="ui-field-contain">
        <label for="select-choice-1" class="select">Custom select:</label>
        <div class="ui-select">
            <a href="#" role="button" id="select-choice-1-button" aria-haspopup="true" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow ui-li-has-count">
                <span>&nbsp;</span>
                <span class="ui-li-count ui-body-inherit" style="display: none;">0</span>
            </a>
            <select name="select-choice-1" id="select-choice-1" data-native-menu="false" multiple="multiple" tabindex="-1">
                <option value="16">Item 1</option>
                <option value="15">Item 2</option>
                <option value="14">Item 3</option>
                <option value="13">Item 4</option>
                <option value="12">Item 5</option>
                <option value="9">Item 6</option>
                <option value="8">Item 7</option>
            </select>
            <div style="display: none;" id="select-choice-1-listbox-placeholder"><!-- placeholder for select-choice-1-listbox --></div>
        </div>
    </div>

    <div class="ui-field-contain">
        <label for="textarea">Textarea:</label>
        <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
    </div>

    <div class="ui-field-contain">
        <label for="file">File:</label>
        <input type="file" name="file" id="file" value="">
    </div>

    <div class="ui-field-contain">
        <label for="submit-1">Send form:</label>
        <div class="ui-btn ui-input-btn ui-corner-all ui-shadow">Send<input type="submit" id="submit-1" onclick="UpdateRecord()" value="Send"></div>
    </div>
</form>

应用中的表单会发布到网站上的表单

// joomla web form

<form id="item-submission" action="/submit-a-request/submission/submission/submit-a-request/maintenance-request/a2db427bfdc794d3695d8ac6843cb04d" method="post" name="submissionForm" accept-charset="utf-8" enctype="multipart/form-data">
    <input type="text" name="elements[0c7f7be5-059b-4cd3-8641-d88f4199af01][0][value]" value="" size="60" maxlength="255">
    <input type="text" name="elements[bc797942-f95f-438e-ad05-e44b2199e9a8][0][value]" value="" size="60" maxlength="255">
    <select id="elements_itemcategoryvalue" name="elements[_itemcategory][value][]" title="Category" size="7">
        <option value="16">Item 1</option>
        <option value="15">Item 2</option>
        <option value="14">Item 3</option>
        <option value="13">Item 4</option>
        <option value="12">Item 5</option>
        <option value="9">Item 6</option>
        <option value="8">Item 7</option>
    </select>
    <textarea name="elements[169f7b63-e778-4a1b-ac22-654c2e248bca][0][value]" cols="60" rows="20"> Description</textarea>
    <textarea name="elements[72d27f11-f7b4-4d8e-b076-5c35f8e896de][0][value]" cols="60" rows="20"></textarea>
    <input type="text" id="filename054c769a-f6d0-4db0-b784-129f9f0d4d78" readonly="readonly">
    <input type="file" name="elements_054c769a-f6d0-4db0-b784-129f9f0d4d78" onchange="javascript: document.getElementById('filename054c769a-f6d0-4db0-b784-129f9f0d4d78').value = this.value.replace(/^.*[\/\\]/g, '');">

    <div class="submit">
        <button type="submit" id="submit-button" class="button-green">Submit Item</button>
    </div>
</form>

Answer 1

是的，这肯定是可能的。 Cordova应用程序只需要进行一些CORS更改，以使AJAX正常工作。

首先，请确保您拥有Cordova whitelist plugin。

其次，请确保在config.xml文件中包含以下内容：

<access origin="*" />
<allow-navigation href="*"/>

这应该有效，但您可能还需要在标题中指定Content-Security-Policy META。这条线在这方面几乎和你一样安全：

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data:">

当然，您还需要确保服务器上有CORS。如果您无法访问Apache，可以使用以下命令设置：

<?php
header("Access-Control-Allow-Origin: *");

希望这有帮助！：）

修改：

至于如何将数据实际发送到表单，这取决于您希望接收数据的方式。我会假设您正在尝试通过HTML进行此操作，以及您希望提交的内容符合http://website.com/send-form?name=John&age=34。

您当前提交数据的主要问题是空格：data: "name="+ name+"& subject="+ subject+"。除去那些。

data: "name="+name+"&subject="+subject+"&select-choice-1="+select-choice-1+"& textarea="+textarea+"+"&file="+file+",

根据您运行后端的方式，您可能需要在脚本末尾传递?，以表示后面的内容应被视为变量。如果是这种情况，您可以将url: "http://website.com/send-form"替换为url: "http://website.com/send-form?"。

我还建议您查看有关如何将数据传递到表单的AJAX documentation，以便您可以相应地调整代码。

编辑2

要通过JavaScript提交表单，您需要使用：

document.forms["loginForm"].submit();

请注意，我的示例中的loginForm对应于您尚未设置的表单ID。在这种情况下，我使用了loginForm，因此您需要更改HTML以反映这一点：

// form on app <form id='loginForm'>

也可以提交没有身份证的表格，但这有点困难。你只有一个表单在你的页面上，所以你也可以使用：

document.forms[0].submit();

在不知道表单ID的情况下，document.forms实际上是一个数组。

请参阅here进一步阅读。

希望这有帮助！

我可以将数据从cordova应用程序表单发送到joomla Web表单吗？

1 个答案: