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实现定时刷新功能代码
May 09 jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jQuery实现滑动开关效果
Aug 02 jQuery
jQuery+ajax实现用户登录验证
Sep 13 jQuery
jQuery实现放大镜案例
Oct 19 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中截取中文字符串的代码小结
2011/07/17 PHP
php5.3 注意事项说明
2013/07/01 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
python时间整形转标准格式的示例分享
2014/02/14 Python
python 爬取微信文章
2016/01/30 Python
利用Python读取文件的四种不同方法比对
2017/05/18 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
Numpy数组的广播机制的实现
2020/11/03 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
Python的信号库Blinker用法详解
2020/12/31 Python
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
构造器Constructor是否可被override?
2013/08/06 面试题
如何在C# winform中异步调用web services
2015/09/21 面试题
销售主管的自我评价分享
2014/01/03 职场文书
生日宴会答谢词
2014/01/09 职场文书
公司拓展活动方案
2014/02/13 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
医师定期考核实施方案
2014/05/07 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
钱学森电影观后感
2015/06/04 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
详解Python requests模块
2021/06/21 Python