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

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

javascript html

Javascript 如何在没有输入标记的情况下将表单数据从html传递到URL参数？,javascript,html,Javascript,Html,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"&g

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>

JS:

但是我不知道如何更改ruleEngineJSON中ng repeat

（键，值）中的值“

section当我单击“修改”时，值部分应该是可编辑的。我怎样才能做到这一点？

有两种方法可以满足您的需要。首先，无论何时对服务器进行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控制器中访问

参数的值
第二种方法是跟踪javaScript中的所有数据，以避免DOM解析，并使用相同的查询参数将值传递给Java控制器。
我尝试将var dataFromHTML=$（'.dateSection）.html（）放入
它总是返回规则名称优先级更新规则引擎我也在上面添加了完整的html。如果你想使用相同的Java控制器，那么你应该更新它以返回JSON，以防参数传递HTML是它没有通过的。我想您的java框架应该允许以一种很好的方式来实现它。下面是您在Spring中的实现方式，我想您正在使用：
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;
}

<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>

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

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

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