1,搜索表单#searchForm做好准备
2,js 将表单数据序列化并传送给“控制器”
3,控制器 添加$actions=word_search
4, words类 添加方法 searchWords
5,js 将返回的数据放入网页相应的DIV #word_list_searched中
6,js 让 DIV #word_list_searched 先隐藏,用户点击搜索后再出现
搜索前
搜索后
![](https://img-my.csdn.net/uploads/201304/25/1366867513_5016.png)
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();
},