WebView抓取表单数据

Question

我编写了一个混合了 HTML5 和 Android 代码的混合应用程序 - 它运行良好，但我遇到了一些问题。

我们的应用程序有一个供人们填写的表格（带有复选框和相应的数据以及评论部分）。该人可以单击每个复选框，但我需要填充单击的项目，获取他们选择的数据以及他们发表的评论。

最好的方法是什么？供参考：数据仅在表格中列出，每个表格的复选框数量发生变化。但它们都与同一件事相关（或同一类）。

我已经编写了一个 javascript 界面，但在找出解析表单数据的最佳方法时遇到问题。

谢谢！

           <form>
            <div id="colors">

                <table>
                    <tr>
                        <th>More header</th><th>NOHTING</th><th>Header</th><th></th>
                    </tr>
                    <tr>
                        <label for="checkbox1" id="checkbox-0">
                            <td class="stock">1261561</td>
                            <td class="etete">whatever</td>
                            <td class="gtgtg">random data</td>
                        </label>
                        <td class="add"><input type="checkbox" value="1" checked /></td>
                    </tr>
                    <tr>
                        <label for="checkbox2" id="checkbox-1">
                            <td class="stock">1261563</td>
                            <td class="etete">something</td>
                            <td class="gtgtg">details here</td>
                        </label>
                        <td class="add"><input type="checkbox" value="2" checked /></td>
                    </tr>
                    <tr>
                        <label for="checkbox3" id="checkbox-2">
                            <td class="stock">1261529</td>
                            <td class="etete">blah</td>
                            <td class="qtqtq">blah blah</td>
                        </label>
                        <td class="add"><input type="checkbox" value="3" checked /></td>
                    </tr>
                    <input type="hidden" id="hidden1" value="xxxxxx" />
                    <input type="hidden" id="hidden2" value="xxxxxxxxxx" />
                    <input type="hidden" id="hidden3" value="" />
                    <input type="hidden" id="fah21" value="x" />
                    <input type="hidden" id="asdf1" value="xxxx,xxx,xx" />
                </table>
            </div>
            <div id="footer">
                <textarea placeholder="Add Your Comments..."></textarea>
                <div id="cancel">
                    <img src="../images/cancel.png" height="50px" width="260px" onclick="goBack()">
                </div>
                <div id="save">
                    <img src="../images/save.png" width="260px" height="100px" onClick="parseForm()" />
                </div>
            </div>
        </form>

parseForm() 是我无法弄清楚的。

类的名称和数据已更改。另外，当用户单击复选框时，将调用此脚本：

$(document).ready(function(){
  $('input[type=checkbox]').tzCheckbox({labels:['Add to whatever','Click to Add']});
});

javascript 接口可以获取任何数据，无论是 JSON、原始数据还是其他任何数据 - 我将修复我的代码以使其正常工作。

Answer 1

最简单的方法是包含一个 JQuery 函数，如下所示：

    $('form').submit(function() {
        Android.processFormData(decodeURIComponent($("form").serialize()));
        return false;
    });

在代码中包含该函数后，为其编写一个 javascript 接口并附加它，如下所示：

    webview.addJavascriptInterface(new JavaScriptInterface(), "Android");

然后在代码中也添加此函数：

private class JavaScriptInterface{
    JavaScriptInterface(){}
    JavaScriptInterface(Context c){}

    public void saveSheetAndClose(){
        webview.goBack();
    }

    public void processFormData(String data) {
            //I'm just splitting and spitting it out to the log. You'd need to write
            //a parser here.

        String[] tokens = data.split("[&]+");
        for (int i = 0 ; i<tokens.length; i++){

            if (tokens[i].contains("check")){
                //I use | in checkboxes to separate multidata
                String Checkbox[] = tokens[i].split("[|]+");

                tokens[i] = "check";
                Log.i("TokenSplit", " " + tokens[i]);
                for (int j=0; j<Checkbox.length; j ++)
                    if (!Checkbox[j].contains("check"))
                    Log.i("TokenSplit", "     " + Checkbox[j]);
                    //cheap way of removing check= if you have multiple values
            }else{
                Log.i("TokenSplit", "" + tokens[i]);
            }
        }
        saveSheetAndClose();
    }
}

注意，这将是最好接受 parseFormData() 中的数据并将数据发送到 ASync 进程，以防止 UIThread 锁定。一定要这样做！