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实现按比例缩放图片的方法
Apr 29 jQuery
jquery仿微信聊天界面
May 06 jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 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
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
php 分库分表hash算法
2009/11/12 PHP
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
Nginx实现反向代理
2017/09/20 Servers
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
Python如何获取文件指定行的内容
2020/05/27 Python
HTML5等待加载动画效果
2017/07/27 HTML / CSS
Booking.com缤客中国:全球酒店在线预订网站
2020/05/03 全球购物
C#基础面试题
2016/10/17 面试题
企业给企业的表扬信
2014/01/13 职场文书
安全标准化实施方案
2014/02/20 职场文书
高中课程设置方案
2014/05/28 职场文书
2014年纳税评估工作总结
2014/12/23 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
龙猫观后感
2015/06/09 职场文书
电影雨中的树观后感
2015/06/15 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS