jQuery中ajax請(qǐng)求后臺(tái)返回json數(shù)據(jù)并渲染HTML的方法
html實(shí)例
<table border="0" class="restaurant_food" cellspacing="0" cellpadding="1"> <input type="text" name="dishes" value="" class="seek_product" placeholder="請(qǐng)輸入菜名"/> <button type='button' class="btn_nor" onclick="seek_product()">搜索</button> <tr> <th width="30%">序號(hào)</th> <th width="70%">菜名</th> </tr> <tr data-id=""> <td></td> <td class="tl"> <p></p></td> </tr> </table>
jquery實(shí)例
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實(shí)例
//搜索菜 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請(qǐng)求后臺(tái)返回json數(shù)據(jù)并渲染HTML的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- jQuery+Ajax+js實(shí)現(xiàn)請(qǐng)求json格式數(shù)據(jù)并渲染到html頁面操作示例
- jquery 通過ajax請(qǐng)求獲取后臺(tái)數(shù)據(jù)顯示在表格上的方法
- jQuery Ajax請(qǐng)求后臺(tái)數(shù)據(jù)并在前臺(tái)接收
- 淺析jQuery Ajax請(qǐng)求參數(shù)和返回?cái)?shù)據(jù)的處理
- JQUERY的AJAX請(qǐng)求緩存里的數(shù)據(jù)問題處理
- jQuery使用ajax跨域請(qǐng)求獲取數(shù)據(jù)
- Jquery使用AJAX方法請(qǐng)求數(shù)據(jù)
相關(guān)文章
基于jQuery實(shí)現(xiàn)表格內(nèi)容的篩選功能
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)表格內(nèi)容的篩選功能的相關(guān)資料,需要的朋友可以參考下2016-08-08jQuery+Ajax實(shí)現(xiàn)限制查詢間隔的方法
這篇文章主要介紹了jQuery+Ajax實(shí)現(xiàn)限制查詢間隔的方法,涉及jQuery的ajax方法參數(shù)設(shè)置及asp.net后臺(tái)交互的相關(guān)技巧,需要的朋友可以參考下2016-06-06兩個(gè)select之間option的互相添加操作(jquery實(shí)現(xiàn))
兩個(gè)select,將其中一個(gè)select選中的選項(xiàng)添加到另一個(gè)select中,或者點(diǎn)擊全部添加按鈕將所有的option都添加過去.2009-11-11jQuery動(dòng)態(tài)操作表單示例【基于table表格】
這篇文章主要介紹了jQuery動(dòng)態(tài)操作表單,結(jié)合實(shí)例形式分析了jQuery針對(duì)table表格的數(shù)據(jù)添加、刪除、元素修改、提交等相關(guān)操作技巧,需要的朋友可以參考下2018-12-12實(shí)用jquery操作表單元素的簡(jiǎn)單代碼
下面小編就為大家?guī)硪黄獙?shí)用jquery操作表單元素的簡(jiǎn)單代碼。小編覺得挺不錯(cuò)的, 現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07easyui中combotree循環(huán)獲取父節(jié)點(diǎn)至根節(jié)點(diǎn)并輸出路徑實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猠asyui中combotree循環(huán)獲取父節(jié)點(diǎn)至根節(jié)點(diǎn)并輸出路徑實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11jQuery實(shí)現(xiàn)精美的多級(jí)下拉菜單特效
這篇文章主要介紹了jQuery實(shí)現(xiàn)精美的多級(jí)下拉菜單特效,主要依托于jQuery的fg.menu.js插件來實(shí)現(xiàn)的,效果非常棒,推薦給大家。2015-03-03