1,搜索表單#searchForm做好準備
2,js 將表單數據序列化並傳送給“控制器”
3,控制器 添加$actions=word_search
4, words類 添加方法 searchWords
5,js 將返回的數據放入網頁相應的DIV
#word_list_searched中
6,js 讓 DIV #word_list_searched 先隱藏,用戶點擊搜索後再出現
搜索前
搜索後
1,搜索表單#searchForm做好準備
<form class="form-horizontal" id="searchForm">
<fieldset>
<div class="control-group span3">
<!-- Search input-->
<div class="controls">
<input id="searchbox" placeholder="請輸入您要查詢的詞語" class="input" type="text" name="keyword">
</div>
</div>
<div class="control-group span3">
<div class="controls">
<!-- Inline Radios -->
<label class="radio inline">
<input checked="checked" value="1" name="group" type="radio">
中文
</label>
<label class="radio inline">
<input value="2" name="group" type="radio">
英文
</label>
</div>
</div>
<div class="control-group span2">
<!-- Button -->
<div class="controls">
<!-- 這句話非常重要,是Ajax提交數據時,指定action的 -->
<input type="hidden" name="action" value="word_search" />
<button class="btn btn-success" type="submit">查詢</button>
</div>
</div>
</fieldset>
</form>
注意2點:
1,表單數據序列化的格式是 keyword=%E5%93%88&group=1&action=word_search
其中 keyword ,group , action 都是 各個input標籤的 name 屬性;因此name 屬性一定要設置
2,
<input type="hidden" name="action" value="word_search" />
這行代碼指定了 動作 action 爲 word_search
2,js 將表單數據序列化並傳送給“控制器”
$("#searchForm button").live("click", function(event){
//必須有這下面這行,否則.ajax方法將無法成功調用
event.preventDefault();
var formData = $(this).parents("form").serialize();
$.ajax({
type: "POST",
url: processFile,
data: formData,
success: function(data) {
},
error: function(msg)
{
alert(msg);
}
});
});
3,控制器 添加
$actions=array(
'word_search' => array(
'object' => 'Words',
'method' => 'searchWords'
)
)
4, words類 添加方法 searchWords
public function searchWords()
{
$keyword = htmlentities($_POST['keyword'], ENT_QUOTES,"UTF-8");
$group = htmlentities($_POST['group'], ENT_QUOTES,"UTF-8");
$words = $this->processSearch($keyword,$group);
$i=0;
$tab_str="<table class='table table-striped table-bordered table-hover table-condensed' align='center'>";
$tab_str.="<thead><td><i class='icon-search'></i></td><td>詞語</td><td>詞性</td><td>傾向值[-3,3]</td><td>詞語類別</td><td>編輯</td></thead>";
foreach ( $words as $key => $word )
{
$i++;
$labels=NULL;
$labels.="<tr>";
$labels.="<td width=5%>".$i."</td>";
//詞語
$link = "<a class='need_model' href='view.php?word_id=".$word['word_id']."'>".$word['word']."</a>";
$labels.="<td width='35%'>".$link."</td>";
//詞性:1,褒貶詞;2,程度副詞
$senti_type=($word[senti_type]===1)?"褒貶詞":"程度副詞";
$labels.="<td width='15%'>".$senti_type."</td>";
//傾向值:-3~3
$labels.="<td width='15%'>".$word[senti_value]."</td>";
//中英文:1,中文;2,英文
$word_type=($word[word_type]==1)?"中文":"English";
$labels.="<td width='15%'>".$word_type."</td>";
//編輯鏈接
$link2 = "<a class='need_model' href='view.php?word_id=".$word['word_id']."'>編輯</a>";
$labels.="<td width='15%'>".$link2."</td>";
$tab_str.=$labels;
}
$tab_str.="</table>";
echo $tab_str;
}
public function processSearch($keyword=NULL,$group=NULL)
{
//這裏暫時還沒有做數據庫分頁
$sql = "SELECT ******************* WHERE 1=1 ";
if ( !empty($keyword) ){
$sql .= " and `***` like '%".$keyword."%'";
}
if ( !empty($group) ){
$sql .= " and `***`=".$group;
}
$sql.=" limit 1,5";
try{
$stmt = $this->db->prepare($sql);
$stmt->execute();
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);
$stmt->closeCursor();
return $results;
}
catch ( Exception $e ){
die ( $e->getMessage() );
}
}
5,js 將返回的數據放入網頁響應的DIV #word_list_searched中
success: function(data) {
$("#word_list_searched").html(data);
},
6,js 讓 DIV #word_list_searched 在搜索後再出現
$(document).ready(function() {
$("#word_list_searched").hide();
});
success: function(data) {
$("#word_list_searched").html(data);
$("#word_list_searched").show();
},