如何根据 URL 中的参数填充我的搜索字段

Question

我正在开发一个 asp.net Web 应用程序，我有以下代码来构建搜索字段部分，该部分根据用户的输入构建 URL 参数：-

<script type="text/javascript">

$(document).ready(function(){

    $('#button').click(function(e) {  
        var count=1;
        var s="";

        var inputvalue = $("#journal").val();
        var inputvalue2 = $("#keywords").val();
        var inputvalue3 = $("#datepub").val();
        var inputvalue4 = $("#title").val();
        var inputvalue5 = $("#localcurrency").val();
        var inputvalue6 = $("#locations").val();
        var inputvalue7 = $("#dropdown1").val();
        var inputvalue8 = $("#dropdown2").val();

        if(inputvalue!=null && inputvalue!="")
        {
        s = s+ "FilterField"+count+"=Journal&FilterValue"+count+"="+inputvalue+"&";
        count++;
        }
        if(inputvalue2!=null && inputvalue2!="")
        {
        s = s+ "FilterField"+count+"=KeyWords&FilterValue"+count+"="+inputvalue2+"&";
        count++;
        }
        if(inputvalue3!=null && inputvalue3!="")
        {
        s = s+ "FilterField"+count+"=datepub&FilterValue"+count+"="+inputvalue3+"&";
        count++;
        }
        if(inputvalue4!=null && inputvalue4!="")
        {
        s = s+ "FilterField"+count+"=Title&FilterValue"+count+"="+inputvalue4+"&";
        count++;
        }
        if(inputvalue5!=null && inputvalue5!="")
        {
        s = s+ "FilterField"+count+"=localcurrency&FilterValue"+count+"="+inputvalue5+"&";
        count++;
        }
        if(inputvalue6!=null && inputvalue6!="")
        {
        s = s+ "FilterField"+count+"=locations&FilterValue"+count+"="+inputvalue6+"&";
        count++;
        }
        if(inputvalue7!=null && inputvalue7!="")
        {
        s = s+ "FilterField"+count+"=dropdown1&FilterValue"+count+"="+inputvalue7+"&";
        count++;
        }
        if(inputvalue8!=null && inputvalue8!="")
        {
        s = s+ "FilterField"+count+"=dropdown2&FilterValue"+count+"="+inputvalue8+"&";
        count++;
        }
        window.location.replace("/teamsites/Bib%20Test/Forms/search.aspx?"+s);

    });
});
</script> 

       Journal <input type="text" id="journal"> 
       keywords <input type="text" id="keywords"> 




<select id="datepub">
<option value=""></option>
  <option value="1950">1950</option>
  <option value="2010">2010</option>
  <option value="2017">2017</option>
  <option value="audi">Audi</option>
</select>

title
<select id="title">
<option value=""></option>
  <option value="TestDoc">test doc</option>
  <option value="t">t</option>

</select>

localcurrency
<select id="localcurrency">
<option value=""></option>
  <option value="USD">USD</option>

</select>

locations
<select id="locations">
<option value=""></option>
  <option value="US">US</option>
  <option value="UK">UK</option>

</select>

dropdown1
<select id="dropdown1">
<option value=""></option>
  <option value="a">a</option>
  <option value="b">b</option>

</select>

dropdown2
<select id="dropdown2">
<option value=""></option>
  <option value="aa">aa</option>
  <option value="bb">bb</option>
  <option value="cc">cc</option>
  <option value="dd">dd</option>
</select>
       <button type="button" id="button">search</button>

当用户点击搜索按钮时，用户将被重定向到/teamsites/Bib%20Test/Forms/search.aspx页面，该页面带有url中的过滤参数，该页面将根据传递的参数显示相关记录。

现在过滤运行良好.. 但我面临的问题是，在我将用户重定向到此页面/teamsites/Bib%20Test/Forms/search.aspx 后，过滤器字段值（例如本地货币、位置、标题等）将清除。 那么我可以使用 JavaScript 为文件管理器字段分配其原始值吗？我的意思是我可以从 URL 中提取字段的值并将其分配给它们吗？所以在用户被重定向到/teamsites/Bib%20Test/Forms/search.aspx 之后，他们仍然可以看到填充了他们输入的过滤值的过滤字段？

Answer 1

您可以通过执行以下操作来完成此操作：

• 解析当前页面的查询字符串以分离出其查询参数
• 处理这些以匹配过滤器字段名称及其值
• 使用$('#' + fieldName).val(value)设置页面中的字段值

下面，作为演示，我将硬编码查询字符串'?FilterField0=locations&FilterValue0=US&FilterField1=dropdown1&FilterValue1=b' 传递给populateSearchFields() 函数。在实践中，您将在此处使用未修改的三个函数，但不要使用硬编码值，而是传入 window.location.search。

// input: '?a=b&b=c&e=f'
// output: { a: 'b', b: 'c', e: 'f' }
function buildParameterMap(queryString) {
  // ignore the ? at the beginning and split the query string into 
  // pieces separated by &
  var pairs = queryString.replace(/^\?/, '').split('&');
  var map = {};

  pairs.forEach(function(pair) {
    // further split each piece to the left and right of the =
    // ignore pairs that are empty strings
    if (pair) {
      var sides = pair.split('=');
      map[sides[0]] = decodeURIComponent(sides[1]);
    }
  });

  return map;
}

// input: { FilterField0: 'Name', FilterValue0: 'Fred',
//          FilterField1: 'age', FilterValue1: '30' }
// output: { name: 'Fred', age: '30' }
function buildFilterFieldMap(parameterMap) {
  var maxFieldCount = 15;

  var map = {};

  for (var i = 0; i < maxFieldCount; i += 1) {
    var filterFieldName = parameterMap['FilterField' + i];
    if (filterFieldName) {
      map[filterFieldName.toLowerCase()] = parameterMap['FilterValue' + i];
    }
  }

  return map;
}

function populateSearchFields(queryString) {
  // build a map from URL query string parameter -> value
  var parameterMap = buildParameterMap(queryString);

  // build a map from search field name -> value
  var filterFieldMap = buildFilterFieldMap(parameterMap);

  Object.keys(filterFieldMap).forEach(function(field) {
    $('#' + field).val(filterFieldMap[field]);
  });
}

populateSearchFields('?FilterField0=locations&FilterValue0=US&FilterField1=dropdown1&FilterValue1=b');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Journal <input type="text" id="journal"> keywords <input type="text" id="keywords">


<select id="datepub">
    <option value=""></option>
      <option value="1950">1950</option>
      <option value="2010">2010</option>
      <option value="2017">2017</option>
      <option value="audi">Audi</option>
    </select> title
<select id="title">
    <option value=""></option>
      <option value="TestDoc">test doc</option>
      <option value="t">t</option>
    
    </select> localcurrency
<select id="localcurrency">
    <option value=""></option>
      <option value="USD">USD</option>
    
    </select> locations
<select id="locations">
    <option value=""></option>
      <option value="US">US</option>
      <option value="UK">UK</option>
    
    </select> dropdown1
<select id="dropdown1">
    <option value=""></option>
      <option value="a">a</option>
      <option value="b">b</option>
    
    </select> dropdown2
<select id="dropdown2">
    <option value=""></option>
      <option value="aa">aa</option>
      <option value="bb">bb</option>
      <option value="cc">cc</option>
      <option value="dd">dd</option>
    </select>
<button type="button" id="button">search</button>

Answer 2

您想将get 请求从一个页面发送到另一个页面。做这样的事情：
第一部分：在查询字符串中发送搜索请求。

$(document).ready(function(){

    $('#button').click(function(e) {  
        var count=1; //out of use
        var s = []; //""; //empty array, not empty string

        var inputvalue = $("#journal").val();
        var inputvalue2 = $("#keywords").val();
        var inputvalue3 = $("#datepub").val();
        var inputvalue4 = $("#title").val();
        var inputvalue5 = $("#localcurrency").val();
        var inputvalue6 = $("#locations").val();
        var inputvalue7 = $("#dropdown1").val();
        var inputvalue8 = $("#dropdown2").val();

        if(inputvalue) // !=null && inputvalue!="") //it is redundant. null and empty string are **falsey**
        {
            s.push('journal='+inputvalue);
            //or if you wish to keep your existing format (not recommended because it would produce problems on the search page)
            //s.push("FilterField"+count+"=Journal&FilterValue"+count+"="+inputvalue);
            //count++;
        }
        if(inputvalue2) //!=null && inputvalue2!="")
        {
           s.push('keywords='+inputvalue2);
        //for existing format see previous comment
        //s = s+ "FilterField"+count+"=KeyWords&FilterValue"+count+"="+inputvalue2+"&";
        //count++;
        }
        /*
        //same for other vars
        if(inputvalue3!=null && inputvalue3!="")
        {
        s = s+ "FilterField"+count+"=datepub&FilterValue"+count+"="+inputvalue3+"&";
        count++;
        }
        if(inputvalue4!=null && inputvalue4!="")
        {
        s = s+ "FilterField"+count+"=Title&FilterValue"+count+"="+inputvalue4+"&";
        count++;
        }
        if(inputvalue5!=null && inputvalue5!="")
        {
        s = s+ "FilterField"+count+"=localcurrency&FilterValue"+count+"="+inputvalue5+"&";
        count++;
        }
        if(inputvalue6!=null && inputvalue6!="")
        {
        s = s+ "FilterField"+count+"=locations&FilterValue"+count+"="+inputvalue6+"&";
        count++;
        }
        if(inputvalue7!=null && inputvalue7!="")
        {
        s = s+ "FilterField"+count+"=dropdown1&FilterValue"+count+"="+inputvalue7+"&";
        count++;
        }
        if(inputvalue8!=null && inputvalue8!="")
        {
        s = s+ "FilterField"+count+"=dropdown2&FilterValue"+count+"="+inputvalue8+"&";
        count++;
        }
        */
        window.location.replace("/teamsites/Bib%20Test/Forms/search.aspx?"+s.join('&')); //Use the array here

    });
});

第二部分：恢复搜索字段中的值。

$(document).ready(function(){
    var query = window.location.search.slice(1); //get ?.... less **?**
    var terms = query.split('&'); //get pairs like key=value
    for(var i = 0, term; term = terms[i]; ++i){ //loop the search terms
       var detail = term.split('='); //journal=some
       $('#'+detail[0]).val(detail[1]); //set the value provided fields have the same **id**s
    }
});

基于 cmets 更新

这都是关于ASP.NET。 .aspx 页面将服务器控制 IDs 与父 IDs 前置，如 parId$controlId。为了避免这种情况并让客户端脚本工作，将ClientIDMode="Static" 属性设置为search.aspx 中的控件。

<asp:TextBox ID="keywords" runat="server" ClientIDMode="Static"></asp:TextBox>

更新 2

OP 是关于 ASP.NET 的。一般而言，无需任何客户端代码即可实现结果。

第一部分

<form method="GET" action="/search.aspx">
   <input type="text" name="keywords" />
   <select name="localcurrency">
     <option value="USD">US Dollar</option>
     <option value="EUR">Euro</option>
   </select>
   <!--other fields -->
   <input type="submit" value="Search" />
</form>

第二部分

<%-- search.aspx --%>
<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">
    void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            if (Request.QueryString["keywords"] != null)
                this.keywords.Text = Request.QueryString["keywords"];
            if (!string.IsNullOrEmpty(Request.QueryString["localcurrency"]))
                localcurrency.SelectedValue = Request.QueryString["localcurrency"];
            //other request query strings
            // DoSearch();
        }
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="keywords" runat="server"></asp:TextBox>
            <asp:DropDownList runat="server" ID="localcurrency">
                <asp:ListItem Value="USD">US Dollar</asp:ListItem>
                <asp:ListItem Value="EUR">Euro</asp:ListItem>
            </asp:DropDownList>
        </div>
    </form>
</body>
</html>

Answer 3

如果您不关心 Internet Explorer 或 Edge，请使用此选项。

当您的页面加载完毕后，您可以在URL API 的帮助下阅读搜索参数。下面是帮助您入门的代码。

请注意，此解决方案取决于表单参数的 ID 等于小写搜索参数的名称。

$(document).ready(() => {
  // Change the value to window.location.href for working with browser's URL instead
  const href = "http://yourhost.com?FilterField0=locations&FilterValue0=US&FilterField1=dropdown1&FilterValue1=b";

  // Initializes the URL object with current location
  const url = new URL(href);
  
  // This array will contain all the FilterFields
  const keys = [];

  for (let entry of url.searchParams) {
    if (entry[0].startsWith("FilterField")) {
      keys.push(entry[0]);
    }
  }

  keys.forEach(field => {
    // Extract the index of FilterField
    const idx = field[field.length - 1];
    // Get the value of FilterField (this gives us the ID of the form field)
    const formField = url.searchParams.get(field).toLowerCase();

    // Set the value of form field using .val()
    $("#" + formField).val(url.searchParams.get('FilterValue' + idx));
  });

  // Rest of the code here
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Journal <input type="text" id="journal"> keywords <input type="text" id="keywords">

<select id="datepub">
<option value=""></option>
  <option value="1950">1950</option>
  <option value="2010">2010</option>
  <option value="2017">2017</option>
  <option value="audi">Audi</option>
</select> title
<select id="title">
<option value=""></option>
  <option value="TestDoc">test doc</option>
  <option value="t">t</option>

</select> localcurrency
<select id="localcurrency">
<option value=""></option>
  <option value="USD">USD</option>

</select> locations
<select id="locations">
<option value=""></option>
  <option value="US">US</option>
  <option value="UK">UK</option>

</select> dropdown1
<select id="dropdown1">
<option value=""></option>
  <option value="a">a</option>
  <option value="b">b</option>

</select> dropdown2
<select id="dropdown2">
<option value=""></option>
  <option value="aa">aa</option>
  <option value="bb">bb</option>
  <option value="cc">cc</option>
  <option value="dd">dd</option>
</select>
<button type="button" id="button">search</button>