通过 url 将多个参数传递到 ASP MVC 和 Javascript 中的同一页面

Question

我不熟悉网络问题并寻求建议。我想做的是在这里：

1 - 页面中有一个包含多个 javascript 帖子的日期选择器

2 - 第一次打开页面时，post方法应该使用初始值调用

3 - 当我从 Datepicker 更改日期间隔并按下提交按钮时，页面应使用新值刷新，因此应使用新值再次触发帖子。

4 - 当页面用新值刷新时，我希望日期选择器输入部分（其中有 2 个）显示更新后的值。

5 - 目前没有初始值。此外，此列表中的第 4 项丢失了。

我知道这里缺少一些基本的东西，但由于不知道系统是如何工作的，我无法通过问题找到答案。谁能稍微修改一下我的代码？

这里是 Datepicker 和它的 JS 部分：

<li>
    <div class="input-daterange input-group" id="datepicker" style="margin-top: 10px; align-content:center">
        <input type="text" class="input-sm form-control" id="startDate" value="07/01/2015" maxlength="10" name="start" style="width:90px" />
        <span class="input-group-addon">ile</span>
        <input type="text" class="input-sm form-control" id="endDate" value="07/05/2015" maxlength="10" name="end" style="width:90px" />
    </div>
</li>
<li>
    <button id="goster" type="button" class="btn btn-default" onclick="goster()"
            style="background-color:#C71F45;color:white;
            margin-top:10px; margin-left:10px">
            Göster
    </button>
</li>

<script>
   function goster() {
        startDate = document.getElementById('startDate').value;
        endDate = document.getElementById('endDate').value;

        var url = "http://localhost:50523/Home/Index?startDate=" + startDate + "&endDate=" + endDate;
        window.location.replace(url);
    }
</script>
<script>
    $(document).ready(function () {
        var QueryString = function () {
            // This function is anonymous, is executed immediately and 
            // the return value is assigned to QueryString!
            var query_string = {};
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                // If first entry with this name
                if (typeof query_string[pair[0]] === "undefined") {
                    query_string[pair[0]] = decodeURIComponent(pair[1]);
                    // If second entry with this name
                } else if (typeof query_string[pair[0]] === "string") {
                    var arr = [query_string[pair[0]], decodeURIComponent(pair[1])];
                    query_string[pair[0]] = arr;
                    // If third or later entry with this name
                } else {
                    query_string[pair[0]].push(decodeURIComponent(pair[1]));
                }
            }
            return query_string;
        }();

        $('.input-daterange').datepicker({
            format: "mm/dd/yyyy",
            autoclose: true,
            language: "tr",
            orientation: "top auto",
            todayHighlight: true
        });

        var startDate = QueryString.startDate;
        var endDate = QueryString.endDate;

        $.post(
            "/api/getUserTotalExp?startDate=" + startDate + "&endDate=" + endDate,
            { data: {} },
            function (data) {
                $('#totaluserexp').html(data + " saat");
            }
        );

        $.post(
             "/api/getUserExpDaily?startDate=" + startDate + "&endDate=" + endDate,
             { data: {} },
             function (data) {
                 ...
             }
        );
    });
</script>

Answer 1

1. 只需要一个 onReady（你做到了）
2. 将代码放在代码中而不是标记中（goster() 调用）
3. 由于$.post 确实是一个ajax 快捷方式，我将把它分解为 位这样我们也许可以更优雅地处理数据。 （一世 用它把 .done 承诺放在 jqXHR 上使用（运行时 ajax 成功完成）
4. 奇怪的是日期选择器不在输入上？也许我不知道 一些东西，但我会把它们放在输入端（你如何处理它 现实取决于你。
5. 从标记中获取 CSS/样式（留给您）
6. 解决帖子/页面刷新问题 - 将其放入 cookie 中（谷歌，建议 $.cookie 插件？）

标记和代码：

<li>
    <div class="input-daterange input-group" id="datepicker" style="margin-top: 10px; align-content:center">
        <input type="text" class="input-sm form-control" id="startDate" value="07/01/2015" maxlength="10" name="start" style="width:90px" /> <span class="input-group-addon">ile</span>

        <input type="text" class="input-sm form-control" id="endDate" value="07/05/2015" maxlength="10" name="end" style="width:90px" />
    </div>
</li>
<li>
    <button id="goster" type="button" class="btn btn-default" style="background-color:#C71F45;color:white;
            margin-top:10px; margin-left:10px">Göster</button>
</li>

和代码：

$(document).ready(function () {
    $('#goster').on('click', function () {
        var startDate = $('#startDate').val();
        var endDate = $('#endDate').val();
        goster(startDate, endDate);
    });

    $('input.input-sm').datepicker({
        format: "mm/dd/yyyy",
        autoclose: true,
        language: "tr",
        orientation: "top auto",
        todayHighlight: true
    });

    function goster(startDate, endDate) {
        PostUserExp(startDate, endDate);
    }

    function PostUserExp(startDate, endDate) {
        //var startDate = $('#startDate').val();
        //var endDate = $('#endDate').val();
        var myajaxExp = $.ajax({
            url: "/api/getUserTotalExp",
            data: {
                "startDate": startDate,
                    "endDate": endDate
            }
        });
        myajaxExp.done(function (data, textStatus, jqXHR) {
            // what to do with data
            $('#totaluserexp').html(data + "saat");
        });
        var myajaxDaily = $.ajax({
            url: "/api/getUserExpDaily",
            data: {
                "startDate": startDate,
                    "endDate": endDate
            }
        });
        myajaxDaily.done(function (data, textStatus, jqXHR) {
            // what to do with data
            $('#totaluserexp').html(data + "saat");
        });
    }

    var startDate = $('#startDate').val();
    var endDate = $('#endDate').val();
    PostUserExp(startDate, endDate)
});

Answer 2

$.post("/api/getUserExpDaily", 
  {
    'startDate': startDate,
    'endDate': endDate
  },
  function (data) {
    ....
  });

编辑：数据：{ ... } 是一个错字。哦，好吧。

这将始终使用 jQuery 来格式化您的日期。现在，如果您的服务器期待 JSON，那么这是一个稍微不同的问题。但是，上面的代码应该适用于您的情况。

https://developer.chrome.com/devtools 网络标签可让您检查您的帖子。如果您查找 getUserExpDaily POST 行。然后您可以检查代码中的值、格式和响应。