通过GET方法的替代Ajax类型POST不起作用


Alternative Ajax Type POST Through GET Method Not Work

我非常热衷于在我的博客中使用这个小部件。此脚本将在我博客的内容中搜索关键字,而无需切换页面。

但是,我在想如果我使用 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() {

不幸的是,我不知道你真正想要实现什么。