使用Jquery過濾結果

我在php中爲腳本創建了一個搜索表單。基本上這個表單有一些複選框和一個提交按鈕。每個複選框都是一個類別，如果我選中一個或多個複選框，結果將按照thoose類別進行過濾。使用Jquery過濾結果

下面是HTML代碼：

<?php 
if ($_POST['do_search'] == 'true') { 
$results = 'Do the query and store results in the $results var'; 
} 
?> 
    <form method="post" action="search.php" id="search"> 
    <input type="checkbox" name="categories[]" id="categories[]" value="1">Category 1 
    <input type="checkbox" name="categories[]" id="categories[]" value="2">Category 2 
    <input type="checkbox" name="categories[]" id="categories[]" value="3">Category 3 
    <input type="submit" name="submit"> 
    <input type="hidden" id="do_search" value="true"> 
    </form> 
    <div id="search_results"> 
<?php echo $results; ?> 
</div>

我試圖用AJAX內嵌得到的結果，我的劇本大部分地區使用jQuery。任何人都可以幫助我弄清楚如何通過ajax實時傳遞$ _POST數據，而無需重新加載頁面？

p.s.我很抱歉我的英文不好，我希望我很清楚：|

來源

2009-12-06 Pennywise83

當您達到目標時的一些優化建議：對已收到的數據使用緩存，以免多次請求相同的數據。 – Gumbo 2009-12-06 23:30:09

jQuery的網格可能會幫助簡單的事情： http://www.trirand.com/blog/?page_id=5 – 2009-12-06 23:46:25

我真的很感謝你的答案，不幸的是，我不知道ajax這麼多...我想從php腳本加載結果，在cletus提供的例子中，結果寫在JS代碼裏面...我編輯了主代碼，向您展示了我的簡單腳本是如何工作的。我非常感謝你的答案，不幸的是，我不知道ajax這麼多...我想從php腳本中加載結果，在cletus提供的示例中，結果寫在JS代碼內部...我編輯了主代碼以顯示你簡單的腳本是如何工作的。 – Pennywise83 2009-12-06 23:49:13

ID必須是唯一的，表單只擔心名稱。

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     $('#submitButton').click(function() 
     { 
      var catArray = new Array(); 
      var j = 0; 
      for(var i = 0; i < 3; i++) 
      { 
       if(document.myForm.categories[i].checked == 1) 
       { 
        catArray[j] = document.myForm.categories[i].value; 
        j++; 
       } 
      } 

      // Just put this here so you can see the output 
      // alert('array:'+catArray.toString()); 

      $.ajax(
      { 
       type: "POST", 
       url:  "search.php", 
       data: ({ categories : catArray.toString() }), 
       success: function(msg) 
       { 
        $('#search_results').html(msg); 
       } 
      }); 

      return false; 
     }); 
    }); 
</script> 
</head> 
<body> 
    <form name="myForm" onsubmit="return false"> 
     Category 1<input type="checkbox" name="categories" id="category1" value="1" /> 
     Category 2<input type="checkbox" name="categories" id="category2" value="2" /> 
     Category 3<input type="checkbox" name="categories" id="category3" value="3" /> 
     <button id="submitButton">Submit</button> 
    </form> 
    <div id="search_results"></div> 
</body> 
</html>

來源

2009-12-06 23:40:46 SimonDever

內部jQuery的，當你做一個AJAX請求，您撥打：

jQuery.ajax(options)

在你的選擇對象，請確保您設置的數據成員。該成員將JavaScript對象序列化爲發佈數據。

然後，您可以攔截表單提交，並通過AJAX通過構建來自操作的請求和表單字段來提交它。

另外，您可以使用更簡單的

jQuery.post()

功能。

http://docs.jquery.com/Ajax

來源

2009-12-06 23:24:46

啓動與此：

$('#search').submit(function(){ 
    var _this = $(this); 
    $.post(_this.attr('action'), _this.serialize(), function(result){ 
     // callback 
    }); 
    return false; 
});

來源

2009-12-06 23:25:27 hubbl

這不是一個Ajax提交。 – cletus 2009-12-06 23:26:03

當然是。 $ .post（）是一個ajax請求 http://docs.jquery.com/Ajax/jQuery.post – hubbl 2009-12-07 09:21:55

這是一個相當detailed tutorial on AJAX form submission，這應該回答你的問題，雖然我不喜歡的查詢參數做的方式。它具有：

var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone; 
$.ajax({ 
    type: "POST", 
    url: "bin/process.php", 
    data: dataString, 
    success: function() { 
    $('#contact_form').html("<div id='message'></div>"); 
    $('#message').html("<h2>Contact Form Submitted!</h2>") 
    .append("<p>We will be in touch soon.</p>") 
    .hide() 
    .fadeIn(1500, function() { 
     $('#message').append("<img id='checkmark' src='images/check.png' />"); 
    }); 
    } 
});

我反而做：

$.ajax({ 
    type: "POST", 
    url: "bin/process.php", 
    data: { 
    name: name, 
    email: email, 
    phone: phone 
    }, 
    success: function() { 
    $('#contact_form').html("<div id='message'></div>"); 
    $('#message').html("<h2>Contact Form Submitted!</h2>") 
    .append("<p>We will be in touch soon.</p>") 
    .hide() 
    .fadeIn(1500, function() { 
     $('#message').append("<img id='checkmark' src='images/check.png' />"); 
    }); 
    } 
});

如果要自動構建表單變量，而不是自動地做這件事，看看Serialize form to JSON with jQuery。

來源

2009-12-06 23:27:02 cletus

使用Jquery過濾結果

回答

相關問題