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

Question

我是网络问题的新手，正在寻求建议。 我想做的是在这里：

1-页面中有一个Datepicker，其中包含多个JavaScript帖子

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

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

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

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

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

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

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

Answer 2

1. 只需要一个onReady（您已经这样做了）
2. 将代码放入代码中而不是标记中（goster（）调用）
3. 由于$.post确实是ajax快捷方式，因此我将对其进行一些说明，以便我们可以更优雅地处理数据。 （我用它来将.done承诺放到jqXHR上使用（在ajax成功完成时运行）
4. 奇怪的是，日期选择器不在输入中？ 也许我不知道什么，但是我会将它们放在输入上（实际上，如何处理取决于您自己。
5. 从标记中获取CSS /样式（交给您）
6. 解决帖子/页面刷新的问题-将其放入Cookie（Google，建议使用$.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)
});