jQuery中ajax请求后台返回json数据并渲染HTML的方法

 更新时间:2018年08月08日 11:30:17   作者:卷筒纸  
今天小编就为大家分享一篇jQuery中ajax请求后台返回json数据并渲染HTML的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • EasyUI学习之Combobox下拉列表(1)

    EasyUI学习之Combobox下拉列表(1)

    这篇文章主要为大家详细介绍了EasyUI学习之Combobox下拉列表的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • jQuery(js)获取文字宽度(显示长度)示例代码

    jQuery(js)获取文字宽度(显示长度)示例代码

    今天遇到了获取文字宽度的问题,在网上找到了不错的方法并成功使用到了项目中,有类似情况的朋友可以参考下
    2013-12-12
  • jQuery中prevUntil()方法用法实例

    jQuery中prevUntil()方法用法实例

    这篇文章主要介绍了jQuery中prevUntil()方法用法,实例分析了按条件查找匹配元素之前所有的同辈元素的使用技巧,需要的朋友可以参考下
    2015-01-01
  • 详解jQuery lazyload 懒加载

    详解jQuery lazyload 懒加载

    Lazy Load是一个用 JavaScript 编写的jQuery插件. 它可以延迟加载长页面中的图片. 本文对它进行实例介绍,具有很好的参考价值,下面跟着小编一起来看下吧
    2016-12-12
  • 有关于eclipse配置spket需要注意的一些地方

    有关于eclipse配置spket需要注意的一些地方

    用eclipse开发jquery程序,可以安装spket插件,这样在写代码的时候,就会有智能感知.eclipse配置spket的文章网上到处都是,spket官网上也有介绍.但配置后有的人无论如何也没有智能感知提示,我就是其中一个.
    2013-04-04
  • jQuery实现的支持IE的html滑动条

    jQuery实现的支持IE的html滑动条

    本文给大家分享的是一段使用jQuery实现支持IE的html滑动条代码,效果非常不错,这里推荐给大家,希望大家能够喜欢。
    2015-03-03
  • jQuery Easyui 下拉树组件combotree

    jQuery Easyui 下拉树组件combotree

    项目中做角色授权时,需要做一个下拉框带树结构的 并且可以多选的组件,就想到了easyui的combotree,下面通过实例代码给大家介绍下Easyui 下拉树组件combotree
    2016-12-12
  • jquery动态改变div宽度和高度

    jquery动态改变div宽度和高度

    这篇文章主要介绍了jquery动态改变div宽度和高度,需要的朋友可以参考下
    2015-02-02
  • jQuery对表单的操作代码集合

    jQuery对表单的操作代码集合

    jQuery对表单的操作代码集合,学习jquery的朋友可以参考下。
    2011-04-04
  • 利用JQuery直接调用asp.net后台的简单方法

    利用JQuery直接调用asp.net后台的简单方法

    下面小编就为大家带来一篇利用JQuery直接调用asp.net后台的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10

最新评论