jQuery中ajax請求后臺返回json數(shù)據(jù)并渲染HTML的方法
更新時間：2018年08月08日 11:30:17 作者：卷筒紙
今天小編就為大家分享一篇jQuery中ajax請求后臺返回json數(shù)據(jù)并渲染HTML的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
html實例
<table border="0" class="restaurant_food" cellspacing="0" cellpadding="1">
<input type="text" name="dishes" value="" class="seek_product" placeholder="請輸入菜名"/>
<button type='button' class="btn_nor" onclick="seek_product()">搜索</button>
<tr>
<th width="30%">序號</th>
<th width="70%">菜名</th>
</tr>
<tr data-id="">
<td></td>
<td class="tl"> <p></p></td>
</tr>
</table>
jquery實例
function seek_product(){
var product = $('.seek_product').val();
$.ajax({
type:'get',
url:'/Cash/Index/seek_product',
data:{name:product},
success:function(res){
var data = eval('('+res+')');
var len = data.length;
var cm = "";
if(len > 0){
for(var i = 0; i < len; i++){
cm += '<tr data-id='+data[i]['id']+'>';
cm += '<td>';
cm += i+1;
cm += '</td>';
cm += '<td class="tl">';
cm += '<p>'+data[i]["name"]+'</p>';
cm += '</td>';
cm += '</tr>';
console.log(cm);
$('.restaurant_food').html(cm);
}
}else{
$('.restaurant_food').html('抱歉，沒有這道菜！');
}
}
})
}
php實例
//搜索菜
public function seek_product(){
$shop_id = session("cashShopId");
$name = I('get.name');
$map['name'] = array('like','%'.$name.'%');
$map['shop_id'] = $shop_id;
$map['status'] = 1;
$productList = M('product')->field('id,name')->where($map)->select();
echo json_encode($productList);
}
以上這篇jQuery中ajax請求后臺返回json數(shù)據(jù)并渲染HTML的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
EasyUI學(xué)習(xí)之Combobox下拉列表(1)
這篇文章主要為大家詳細介紹了EasyUI學(xué)習(xí)之Combobox下拉列表的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
今天遇到了獲取文字寬度的問題，在網(wǎng)上找到了不錯的方法并成功使用到了項目中，有類似情況的朋友可以參考下2013-12-12
這篇文章主要介紹了jQuery中prevUntil()方法用法,實例分析了按條件查找匹配元素之前所有的同輩元素的使用技巧,需要的朋友可以參考下2015-01-01
Lazy Load是一個用 JavaScript 編寫的jQuery插件. 它可以延遲加載長頁面中的圖片. 本文對它進行實例介紹，具有很好的參考價值，下面跟著小編一起來看下吧2016-12-12
有關(guān)于eclipse配置spket需要注意的一些地方
用eclipse開發(fā)jquery程序,可以安裝spket插件,這樣在寫代碼的時候,就會有智能感知.eclipse配置spket的文章網(wǎng)上到處都是,spket官網(wǎng)上也有介紹.但配置后有的人無論如何也沒有智能感知提示,我就是其中一個.2013-04-04
本文給大家分享的是一段使用jQuery實現(xiàn)支持IE的html滑動條代碼，效果非常不錯，這里推薦給大家，希望大家能夠喜歡。2015-03-03
項目中做角色授權(quán)時，需要做一個下拉框帶樹結(jié)構(gòu)的 并且可以多選的組件，就想到了easyui的combotree，下面通過實例代碼給大家介紹下Easyui 下拉樹組件combotree2016-12-12
這篇文章主要介紹了jquery動態(tài)改變div寬度和高度,需要的朋友可以參考下2015-02-02
jQuery對表單的操作代碼集合，學(xué)習(xí)jquery的朋友可以參考下。2011-04-04
利用JQuery直接調(diào)用asp.net后臺的簡單方法
下面小編就為大家?guī)硪黄肑Query直接調(diào)用asp.net后臺的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10