Question

我有一个页面showlist.php，它从记录集中加载一组结果。有一个搜索字段，使用jquery load返回结果。这适用于一个单词，但如果搜索查询中有多个单词则不行。任何人都可以展示如何让它适用于任何搜索查询？必须是一些基本的错误，但谷歌搜索没有帮助。

showlist.php的关键元素： -

<div id="contentarea">

<script type="text/javascript"> 
   function contentloader(url){
      $("#contentarea").load(url);
 }
</script>

<input name="search" type="text" id="inputsearch"/>

<a onclick="contentloader('showlist.php?search='+document.getElementById('inputsearch').value+'')">Search</a>

</div>

Answer 1

您需要对document.getElementById('inputsearch').value的结果进行HTML编码，以便将所有作品传递给服务器。

请参阅：

HTML-encoding lost when attribute read from input field

Encode URL in JavaScript?

及其中的链接。

Answer 2

您需要使用值调用encodeURIComponent以正确格式化查询/搜索词：

<a onclick="contentloader('showlist.php?search='+encodeURIComponent(document.getElementById('inputsearch').value)+'')">Search</a>

有关进一步讨论，请参阅Stack Overflow问题Best practice: escape, or encodeURI / encodeURIComponent。

Answer 3

在框中输入abc％20xyz。如果可行，也许您需要对该值进行urlencode。

Answer 4

您可以使用 onClick侦听器，因为您已经在使用jQuery。我认为它比使用 onClick属性更好。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<div id="contentarea">

<input name="search" type="text" id="inputsearch"/>
<a id="search">Search</a>

<script type="text/javascript"> 
   $( document ).ready(function (){     // when document ready
      $("#search").click(function(){    // add a click listner
            $("#contentarea").load(
                  encodeURI($('#inputsearch').val())   // encode input string
             );
        }
      );
    })
</script>
</div>

带有jquery加载的getElementById问题

4 个答案: