jQuery中ajax请求后台返回json数据并渲染HTML的方法


Posted in jQuery onAugust 08, 2018

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的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
js和jquery中获取非行间样式
May 05 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 #jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 #jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 #jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 #jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 #jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 #jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 #jQuery
You might like
php读取mysql的简单实例
2014/01/15 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
jquery下json数组的操作实现代码
2010/08/09 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
2010/12/03 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
简单的Python2.7编程初学经验总结
2015/04/01 Python
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
python编写简单爬虫资料汇总
2016/03/22 Python
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
python生成器推导式用法简单示例
2019/10/08 Python
python装饰器使用实例详解
2019/12/14 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
军训自我鉴定
2013/12/14 职场文书
法学专业本科生自荐信范文
2013/12/17 职场文书
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
2015年个人思想总结
2015/03/09 职场文书
python基础之函数的定义和调用
2021/10/24 Python