温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

jQuery中如何实现ajax请求后台返回json数据并渲染HTML

发布时间:2021-08-13 09:21:59 来源:亿速云 阅读:198 作者:小新 栏目:web开发

小编给大家分享一下jQuery中如何实现ajax请求后台返回json数据并渲染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数据并渲染HTML”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI