替代Ajax類型POST通過GET方法不起作用

我非常熱衷於在我的博客中使用此小部件。該腳本將搜索我的博客內容中的關鍵字，而無需切換頁面。替代Ajax類型POST通過GET方法不起作用

但是，我想如果我添加一個GET方法的搜索功能。例如，通過訪問domain.com/page-search.php?search=keyword即時獲取適當的內容。

我試圖在腳本中替換type: "POST"到type: "GET"，但無濟於事。如果我使用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>

UPDATE

我已經找到了解決這一問題。我更改此代碼：

$(".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'); ?>"/>

來源

2016-02-10 Norax

你會更好，讓$_GET['search']在php腳本，處理請求和所服務的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'; 
}

來源

2016-02-11 06:43:59 DelightedD0D

這與我的預期相符完美謝謝@ DelightedD0D – Norax

謝謝你的代碼對我來說是正確的，但是如果他們可以解決，結果沒什麼問題。如果我單擊SUBMIT double，則該值將翻倍。這可以克服什麼？示例屏幕截圖：http://i.stack.imgur.com/Hrfmt.png – Norax

@Norax查看更新，將'$ results.append（html）.show（）;改爲'$ results.html（html）.show （）;' – DelightedD0D

-2

對於這一點：

如果我使用jQuery自動提交$（「test」）。它工作，但會切換到移動頁面。

也許嘗試：

$("#test").submit(function(event) {

代替：

$(".search_button").click(function() {

可惜的是，我不知道你想真正實現什麼。

來源

2016-02-10 21:07:26 LuckyLue

謝謝，但它的工作方式相同，如果使用'$（「 search_button」）。點擊（函數（）{' 我希望如果訪問'britha.com/iklan/cari.php？search = KEYWORD'生成數據。 – Norax

'.submit（）'會提交表單並重新加載頁面.... OP表示他們不想......這甚至是*在你引用的評論中* – DelightedD0D

替代Ajax類型POST通過GET方法不起作用

回答

相關問題