我非常热衷于在我的博客中使用这个小部件。此脚本将在我博客的内容中搜索关键字,而无需切换页面。
但是,我在想如果我使用 GET 方法添加搜索功能会怎样。例如,通过访问domain.com/page-search.php?search=keyword
立即获得适当的内容。
我试图替换脚本中要type: "GET"
type: "POST"
,但无济于事。如果我使用 jQuery 自动提交$("test").Submit();
它可以工作,但会切换到移动页面。所以我考虑它是如何仍然失败的。
我希望我的问题很清楚。这是我使用 AJAX http://britha.com/iklan/cari.php?search=murah 的脚本示例
谢谢。。
<script type="text/javascript">
$(function() {
$(".search_button").click(function() {
var searchString = $("#search_box").val();
var data = 'search='+ searchString;
if(searchString) {
$.ajax({
type: "POST",
url: "searchResult.php",
data: data,
beforeSend: function(html) {
$("#results").html('');
$(".mySearch").html(searchString);
},
success: function(html){
$("#results").show();
$("#results").append(html);
}
});
}
return false;
});
});
</script>
<div id="container">
<div id="box_cari">
<form id="test" method="post" action="searchResult.php">
<input type="text" name="search" id="search_box" class='search_box'/>
<input type="submit" value="SEARCH" class="search_button" /><br />
</form>
</div>
<div>
<div id="results"></div>
</div>
</div>
更新
我已经找到了解决这个问题的方法。我更改此代码:
$(".search_button").click(function() {
存在:
<?php
if(isset($_GET['search'])) {
$osearch = $_GET['search'];
echo "var control = $(document).ready";
}
else {
echo "var control = $('.search_button').click";
}
?>
control(function() {
和添加值在搜索中:
<input type="text" name="search" id="search_box" class='search_box' value="<?php echo htmlentities($osearch, ENT_QUOTES, 'UTF-8'); ?>"/>
您最好在php
脚本中获取$_GET['search']
,处理请求并直接在提供的 html 中显示结果,但由于您似乎在询问如何在客户端使用 ajax 执行此操作:
以下是实现目标的更合适方法。密切注意encodeURIComponent()
位,如果你不添加这个,它稍后会咬你
$(function() {
var search = getQueryVariable('search'); // on load, check for search var in URL
if (search != 'not found') {
getSearchResult(search);
}
$(".search_button").click(function() { // on click, check for search var in input
var search = $("#search_box").val();
if (search != '') getSearchResult(search);
return false;
});
});
function getSearchResult(searchString) {
var $results = $("#results").html('');
$(".mySearch").html(searchString);
var data = 'search=' + encodeURIComponent(searchString); // make sure you encode this, otherwise characters like & will muck up the querystring!
$.ajax({
type: "POST",
url: "searchResult.php",
data: data,
success: function(html) {
$results.html(html).show();
}
});
}
function getQueryVariable(variable) { // function to retreive GET var from URL
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return decodeURIComponent(pair[1]);
}
}
return 'not found';
}
为此:
如果我使用 jQuery 自动提交 $("test")。提交();它可以工作,但会切换以移动页面。
也许尝试:
$("#test").submit(function(event) {
相反:
$(".search_button").click(function() {
不幸的是,我不知道你真正想要实现什么。