如何在没有输入标签的情况下将表单数据从html传递到URL参数？

问题描述 投票：1回答：1

HTML代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../css/preloader.css">
    <script src="../js/jquery.preloader.min.js"></script>
    <script src="../js/scriptRuleEngine.js"></script>
</head>
<body ng-app ng-controller="OrderFormControllerForRE">
<header>
    <div class="container">
        <div id="branding">
            <h1><span class="highlight">Modify Rule Engine </span></h1>
        </div>

    </div>
</header>

<section class="col-md-12 col-lg-12 dateSection">
    <!--<form method="get">-->
    <table id="ruleEngine" class="table table-sm table-inverse table-responsive table-striped table-bordered"
           cellpadding="20" width="100%">
        <thead>
        <tr>
            <th>Rule Name</th>
            <th>Priority</th>
        </tr>
        </thead>
        <tfoot>
        <tr ng-repeat="(key,value) in ruleEngineJSON">
            <td>{{key}}</td>
            <td><select>
                <option selected value="{{value}}">{{value}}</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select></td>
        </tr>
        </tfoot>
    </table>
    <span class="submitButton">
        <button class='btn btn-primary' onclick="updateRuleEngine()">Update Rule Engine </button>
    </span>
    <!--</form>-->

</section>

<footer>
    <p>Salesforce Free Code Review For Syngenta, Copyright &copy; 2017</p>
    <p>Developed By - ****</p>
</footer>
</body>
</html>

控制器：

@RequestMapping(value = "/getRuleEngine", method = RequestMethod.GET)
    public String getRuleEngine(@RequestParam Map<String, String> mapOfRuleAndPriority) throws IOException {

        Gson gson = new GsonBuilder().create();
        Map<String, String> ruleEngine;
        try {
            ruleEngine = ViewAndModifyRuleEngine.modify(mapOfRuleAndPriority);
        } catch (Exception e) {
            return gson.toJson(e.getMessage());
        }

        if (!ruleEngine.isEmpty()) {
            return gson.toJson(ruleEngine);
        }
        return gson.toJson(ruleEngine);

    }

JavaScript：

function OrderFormControllerForRE($scope, $http) {
        var urlString = window.location.href;
        var urlParams = parseURLParams(urlString);

        var jsonData = $.ajax({
            url: "http://********:8989/getRuleEngine",
            dataType: "json",
            crossDomain: true,
            async: false
        }).responseText;

        if (!jsonData || jsonData === "") {
                window.location.pathname = "../html/noDataFetched.html";
        }

        var parsed = JSON.parse(jsonData);

        if (parsed.error) {
            window.location.pathname = "../html/error.html";
        }

        $scope.ruleEngineJSON = parsed;
}

function navigateRuleEngine() {
    window.location.pathname = "../html/modifyRuleEngine.html";
}

function updateRuleEngine() {
    window.location.pathname = "../html/modifyRuleEngine.html";
}

function parseURLParams(url) {
    var queryStart = url.indexOf("?") + 1,
        queryEnd = url.indexOf("#") + 1 || url.length + 1,
        query = url.slice(queryStart, queryEnd - 1),
        pairs = query.replace(/\+/g, " ").split("&"),
        parms = {}, i, n, v, nv;

    if (query === url || query === "") return;

    for (i = 0; i < pairs.length; i++) {
        nv = pairs[i].split("=", 2);
        n = decodeURIComponent(nv[0]);
        v = decodeURIComponent(nv[1]);

        if (!parms.hasOwnProperty(n)) parms[n] = [];
        parms[n].push(nv.length === 2 ? v : null);
    }
    return parms;
}

在从UI更改html表上的值之后，我需要将键值对传递给url参数，以便更新值，例如：**********:8989/getRuleEngine?ApexXSSFromURLParam=2。 html表上的数据也来自同一个控制器。因此，这里不能使用输入标签。

有没有办法实现这个目标？

更新1

当我使用角度js时，我发现有一种方法可以实现这一点，我将我的html片段转换为

<section class="col-md-12 col-lg-12 dateSection">
    <!--<form method="get">-->
    <table id="ruleEngine" class="table table-sm table-inverse table-responsive table-striped table-bordered"
           cellpadding="20" width="100%">
        <thead>
        <tr>
            <th>Rule Name</th>
            <th>Priority</th>
            <th></th>
        </tr>
        </thead>
        <tfoot>
        <tr ng-repeat="(key,value) in ruleEngineJSON">
            <td>{{key}}</td>
            <td>{{value}}</td>
            <td><button type="button" class="btn btn-default"
                        ng-click="modifyPriority(key)">Modify</button></td>
        </tr>
        </tfoot>
    </table>
    <!--</form>-->

</section>

JS：

    $scope.ruleName = "";
    $scope.priority = "";
    $scope.modifyPriority = function(ruleName) {
            $scope.ruleName = ruleName;
            $scope.priority = $scope.ruleEngineJSON[ruleName];
    };

但是当我点击修改时，我无法弄清楚如何更改ng-repeat (key,value) in ruleEngineJSON"部分中的值，值部分应该是可编辑的。我怎样才能做到这一点？

javascript html html5
1个回答
1
投票

有两种方法可以满足您的需求。首先，每当您对服务器进行AJAX或HTTP调用时，解析需要读取数据的DOM元素并将其作为查询参数附加。

由于您没有提供改变HTML的代码，这里有一个示例代码可以完全满足您的需要，但使用一些假的“.selector”类来获取数据。

    var dataFromHTML = $('.selector').html();

    var jsonData = $.ajax({
        url: "http://********:8989/getRuleEngine?PARAMETER=" + dataFromHTML,
        dataType: "json",
        crossDomain: true,
        async: false
    }).responseText;

然后，您可以在Java控制器中访问PARAMETER的值。

第二种方法是跟踪javaScript中的所有数据以避免DOM解析并使用相同的Query参数将值传递给Java控制器。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.