我正在尝试将 AJAX 功能添加到基于 WordPress 的网站。
当访问者单击菜单链接时,此代码会将所需页面的文本加载到主页中:
$('#access a').click(function(event) {
event.preventDefault();
var url = $(this).attr('href');
$('#content').fadeOut(500, function() {
$('#content').load(url, function() {
$('#content').fadeIn(500);
});
});
});
我的问题是搜索表单。它在页面中具有以下结构:
<div id="my_search"><form role="search" method="get" id="searchform" action="http://myurl.com/" >
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form></div>
当我在表单中输入单词“testing”,然后单击“#searchsubmit”按钮或键盘上的 Enter 键时,我会重定向到一个新的 WordPress 页面,地址如下:
http://www.myurl.com/?s=testing
下面是让它工作的 PHP 代码:
<?php if ( have_posts() ) : ?>
<h1 class="page-title"><?php printf( __( 'Search Results for: %s', 'twentyten' ), '<span>' . get_search_query() . '</span>' ); ?></h1>
<?php
/* Run the loop for the search to output the results.
* If you want to overload this in a child theme then include a file
* called loop-search.php and that will be used instead.
*/
get_template_part( 'loop', 'search' );
?>
<?php else : ?>
<div id="post-0" class="post no-results not-found">
<h2 class="entry-title"><?php _e( 'Nothing Found', 'twentyten' ); ?></h2>
<div class="entry-content">
<p><?php _e( 'Sorry, but nothing matched your search criteria. Please try again with some different keywords.', 'twentyten' ); ?></p>
</div><!-- .entry-content -->
</div><!-- #post-0 -->
<?php endif; ?>
问题:我想阻止 #searchsubmit 单击和 Enter 键单击时的默认行为,并将搜索结果 (http://www.myurl.com/?s=whateverwordItype) 的内容加载到主页的#content。我怎样才能做到这一点?
(我想我只需要以某种方式将 php 代码插入到 jQuery 代码中,但这个任务有点超出了我对 jQuery 和 PHP 的了解。)
如果可能的话,如果有知识渊博的人提供代码片段,我将不胜感激。
最佳答案
使用一些简单的 jQuery 和 javascript
为了通过 ajax 请求加载搜索结果,您可以使用以下代码直接从搜索结果页面获取它们:
// Bind the submit event for your form
$('#searchform').submit(function( e ){
// Stop the form from submitting
e.preventDefault();
// Get the search term
var term = $('#s').val();
// Make sure the user searched for something
if ( term ){
$.get( '/', { s: term }, function( data ){
// Place the fetched results inside the #content element
$('#content').html( $(data).find('#content') );
});
}
});
注:$(data).find('#content')
假设你的 search.php
结果聚合在 id 为 content 的元素中,即 <div id="#content"> ... Results ... </div>
以上内容将进入外部文件或放置在结束 </body>
之前标签。
您可以自定义search.php
页面来组织您的输出结果。
关于jQuery:如何 AJAX 化 WordPress 搜索?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6677820/