jQuery中ajax获取数据赋值给页面的实例


Posted in jQuery onDecember 31, 2017

实例如下所示:

//html代码 
<pre name="code" class="html"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="cityname" id="{$rr[code]}" name='{$rr[name]}'>{$rr[name]}</a></pre><br> 
<pre></pre> 
<br> 
<pre name="code" class="php">//控制器代码 
$courseArrs = json_decode(trim($courseArrs,chr(239).chr(187).chr(191)),true); 
$newData['courseArrs'] = $courseArrs['data']; 
echo json_encode(array('state' => 1,'data'=>$newData));die;</pre><br> 
<pre name="code" class="html">//ajax代码 
<script type="text/javascript"> 
  //地区ajax获取数据 
  $(function(){ 
   $(".cityname").click(function(){ 
    var code = $(this).attr("id"); 
    var name = $(this).attr("name"); 
    $('#city_name').html(name); 
    var course_info =''; 
    var url="?m=content&c=cityPoster&a=wenduNewsInfos"; 
    $.ajax({ 
     type: "GET", 
     url: url, 
     data: {cityId:code},   
     dataType: "json", 
     async:false, 
     success: function(data){ 
     course_info=data.data.posterArrs;//公告返回结果 
     course_arr=data.data.courseArrs;//课程返回结果 
 
     console.log(course_info); 
 
     return false; 
     html = ''; 
     },  
    }); 
    //课程ajax请求结果赋值 
    //考研公共课 
    var data_ggk=course_arr[0]; 
    var kyhtml=''; 
    kyhtml+=' <div class="local_courseLeft">'; 
    if(data_ggk==''){  
     kyhtml+='<div class="second_interview">'; 
     kyhtml+='<p class="other-choose">您可选择附近城市的分校课程<br>'; 
     kyhtml+=' 也可以选择网校,在线学习<a class="enter_official" target="_blank" href="http://www.wenduedu.com/" rel="external nofollow" >进入文都网校</a></p>'; 
     kyhtml+=' <p class="official_telphone">400-606-9976</p>'; 
     kyhtml+='</div>';  
    }else if(data_ggk.length){ 
    var length0=data_ggk.length; 
    for(var i=0;i< length0;i++){ 
     kyhtml+='<div class="local_courseList">'; 
     kyhtml+='<p class="localCourse_heading"><a href="'+data_ggk[i].url+'" rel="external nofollow" rel="external nofollow" title="'+data_ggk[i].title+'" target="_blank">'+data_ggk[i].title+'</a></p>'; 
     kyhtml+='<div class="localCourse-introduce">'; 
     kyhtml+='<span class="courseIntroduce-title">课程简介:</span>'; 
     kyhtml+='<a class="localCourse-others localCourse-details" title="'+data_ggk[i].description+'" >'+data_ggk[i].description+'</a>'; 
     kyhtml+='</div>'; 
     kyhtml+='<div class="localCourse-introduce teach-master">'; 
     kyhtml+='<span class="courseIntroduce-title">授课名师:</span>'; 
     kyhtml+='<a class="localCourse-others teacher_Name" title="'+data_ggk[i].teacher+'">'+data_ggk[i].teacher+'</a>'; 
     kyhtml+='</div>'; 
     kyhtml+='<div class="localCourse_Enter">'; 
     kyhtml+='<p class="remian-days">报名剩余'+data_ggk[i].sign_end+'天</p>'; 
     kyhtml+='<a href="'+data_ggk[i].url+'" rel="external nofollow" rel="external nofollow" target="_blank" class="course-consult">报名咨询</a>'; 
     kyhtml+='</div>'; 
     kyhtml+='</div>'; 
     } 
    } 
    kyhtml+='</div>'; 
    //公告 
     kyhtml+='<div class="localCourse-notice">'; 
     kyhtml+='<h3 class="common-titleModule common-titleModuleWD">'; 
     kyhtml+='<a target="_blank" class="commonTitle_name" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >公告</a><b class="commonTitle-line"></b></h3>'; 
     kyhtml+='<ul class="localCourse-noticeList">'; 
     for(var coursePer in course_info[0]){ 
     kyhtml+='<li><a target="_blank" href="'+course_info[0][coursePer].url+'" rel="external nofollow" >'+course_info[0][coursePer].title+'</a></li>'; 
     } 
     kyhtml += '</ul>'; 
     kyhtml+='</div>'; 
    $('#ggk').html(''); 
    $('#ggk').html(kyhtml); 
}); 
  }) 
</script></pre><br> 
<br>

以上这篇jQuery中ajax获取数据赋值给页面的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery中map函数的两种方式
Apr 07 jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
jQuery插件实现图片轮播效果
Oct 19 jQuery
jQuery实现穿梭框效果
Jan 19 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 #jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 #jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 #jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 #jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 #jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 #jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 #jQuery
You might like
星际玩家的三大定律
2020/03/04 星际争霸
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
javascript 闭包详解
2015/02/15 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
React路由管理之React Router总结
2018/05/10 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
Python中基础的socket编程实战攻略
2016/06/01 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
python开头的coding设置方法
2019/08/08 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
历史学专业个人的自我评价
2013/10/13 职场文书
驾驶员培训方案
2014/05/01 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
python井字棋游戏实现人机对战
2022/04/28 Python