带有jquery加载的getElementById问题

I have a page, showlist.php, which loads a set of results from a recordset. There is a search field which returns results using jquery load. This works fine for one word, but not if there is more than one word in the search query. Can anybody show how to get this to work for any search query? Must be some basic error but googling around has not helped.

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

Key elements of showlist.php:-

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>

4 个解决方案

#1

You need to HTML encode the result of document.getElementById('inputsearch').value so that all the works are passes to the server.

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

See:

HTML-encoding lost when attribute read from input field

从输入字段读取属性时,HTML编码丢失

Encode URL in JavaScript?

在JavaScript中编码URL?

and links therein.

和其中的链接。

#2

You need to call encodeURIComponent with the value to correctly format the query/search term:

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

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

See Stack Overflow question Best practice: escape, or encodeURI / encodeURIComponent for further discussion.

请参阅Stack Overflow问题最佳实践:escape或encodeURI / encodeURIComponent以供进一步讨论。

#3

type abc%20xyz in the box. if that works, maybe you need to urlencode the value.

在框中键入abc%20xyz。如果有效,也许您需要对该值进行urlencode。

#4

You can use onClick listener, since you are already using jQuery. I think it is a better than using onClick attribute.

您可以使用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>

#1