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插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
详解jQuery-each()方法
Mar 13 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
jquery实现进度条状态展示
Mar 26 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
再探JavaScript作用域
2014/09/24 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
Python的Django框架中的Context使用
2015/07/15 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
pandas删除指定行详解
2019/04/04 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
代办委托书怎样写
2014/04/08 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
单位介绍信格式范文
2015/05/04 职场文书
戒赌保证书
2015/05/11 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
vue ref如何获取子组件属性值
2022/03/31 Vue.js