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中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 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初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
composer.lock文件的作用
2016/02/03 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
js中this对象用法分析
2018/01/05 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
python使用wxpython开发简单记事本的方法
2015/05/20 Python
python装饰器初探(推荐)
2016/07/21 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
Python3爬楼梯算法示例
2019/03/04 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
几道数据库的面试题或笔试题
2014/05/31 面试题
初二物理教学反思
2014/01/29 职场文书
好学生评语大全
2014/05/05 职场文书
关于责任的演讲稿
2014/05/20 职场文书
基层党员公开承诺书
2014/05/29 职场文书
中秋手机店促销方案
2014/06/16 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书