使用 jquery 将查询字符串添加到 url

Posted 2023-02-22

【中文标题】使用 jquery 将查询字符串添加到 url

【英文标题】：Add query string to url using jquery

【发布时间】：2015-07-20 09:40:37

【问题描述】：

大家好，我是新来的，我有一个带有表单的页面，用于搜索车辆并显示搜索结果，当我在搜索结果表中单击车辆时，我想使用 jquery 向 url 添加 3 个参数。从表格中我需要 startDate 和 EndDate，从结果表中我需要车辆牌照号码。谢谢大家，这是我的代码：

<script>
        $('table tbody tr').click(function () 
            var vehicleLicenseNumber = $(this).children('td').first().text();
            var startDate = $("#StartDate").val();
            var endDate = $("#EndDate").val();

            $.get('@Url.Action("OrderDetails","Guest")');
        );

    );
</script>


@using (html.BeginForm())

    @Html.ValidationSummary(true)
    <div class="container">
        <div class="row">
            <p class="col-sm-2">
                @Html.LabelFor(s => s.Manufacturer)<br />
                @Html.DropDownListFor(s => s.Manufacturer, (IEnumerable<SelectListItem>)ViewBag.Manufacturers, "Select Manufacturer")
                @Html.ValidationMessageFor(s => s.Manufacturer)
            </p>
            <p class="col-sm-2">
                @Html.LabelFor(s => s.Model)<br />
                @Html.DropDownListFor(s => s.Model, (IEnumerable<SelectListItem>)ViewBag.Models, "Select Model")
                @Html.ValidationMessageFor(s => s.Model)
            </p>
            <p class="col-sm-2">
                @Html.LabelFor(s => s.Transmission)<br />
                @Html.DropDownListFor(s => s.Transmission, Enum.GetNames(typeof(Entities.Enums.TransmissionSearch)).Select(e => new SelectListItem  Text = e ), "Select Transmission")
                @Html.ValidationMessageFor(s => s.Transmission)
            </p>
            <p class="col-sm-2">
                @Html.LabelFor(s => s.StartDate)<br />
                @Html.TextBoxFor(s => s.StartDate, new  type = "date" )
                @Html.ValidationMessageFor(s => s.StartDate)
            </p>
            <p class="col-sm-2">
                @Html.LabelFor(s => s.EndDate)<br />
                @Html.TextBoxFor(s => s.EndDate, new  type = "date" )
                @Html.ValidationMessageFor(s => s.EndDate)
            </p>
            <p class="col-sm-2">
                <button class="btn btn-default btn-lg" type="submit">Search</button>
            </p>
        </div>
    </div>

<div>
    @if (ViewBag.list != null)
    
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>LicenseNumber</th>
                        <th>Manufacturer</th>
                        <th>Model</th>
                        <th>DayCost</th>
                        <th>DelayDayCost</th>
                        <th>Transmission</th>
                        <th>Mileage</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in ViewBag.list)
                    
                        <tr>
                            <td>@item.LicenseNumber</td>
                            <td>@item.VehicleTypeId.Manufacturer</td>
                            <td>@item.VehicleTypeId.Model</td>
                            <td>@item.VehicleTypeId.DayCost</td>
                            <td>@item.VehicleTypeId.DelayDayCost</td>
                            <td>@item.VehicleTypeId.Transmission</td>
                            <td>@item.Mileage</td>
                        </tr>
                    
                </tbody>
            </table>
    
    else
    
        <span>No vehicle was found</span>
    

</div>

【问题讨论】：

如果您使用的是post，为什么需要将参数添加到url？您是否使用post方法？您已经有了这些值...$.ajax 有据可查...建议重新访问 API 文档以了解如何使用数据参数。您要问的是手册中的内容

很抱歉这篇文章是我试图用 Json 做的。错误使用 get 并在控制器中通过许可证号从 BD 获取车辆。只是想知道如何将这 3 个参数添加到 url..

【参考方案1】：

根据$.get 文档，您只需要一个数据对象

var data=
    vehicleLicenseNumber : $(this).children('td').first().text(),
    startDate  : $("#StartDate").val(),
    endDate : $("#EndDate").val()


$.get('@Url.Action("OrderDetails","Guest")', data, function(serevrResponse)
  // do something with server response
);

jQuery 将使用对象键作为查询参数名称在内部转换 url