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 相关文章推荐
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
jQuery实现购物车全功能
Jan 11 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一个找二层目录的小东东
2012/08/02 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
mouse_on_title.js
2006/08/25 Javascript
浅谈javascript 面向对象编程
2009/10/28 Javascript
javascript代码加载优化方法
2011/01/30 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
jquery密码强度校验
2015/12/02 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
Python异常学习笔记
2015/02/03 Python
Python变量赋值的秘密分享
2018/04/03 Python
python读取中文txt文本的方法
2018/04/12 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
全球立体声:World Wide Stereo
2018/09/29 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
社区植树节活动总结
2015/02/06 职场文书
检讨书怎么写
2015/05/07 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
美丽人生观后感
2015/06/03 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
Redis基本数据类型List常用操作命令
2022/06/01 Redis