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

实例如下所示:

//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获取数据赋值给页面的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • jQuery使用ajax跨域获取数据的简单实例

    jQuery使用ajax跨域获取数据的简单实例 var webMethod = "http://localhost:54473/Service1.asmx/HelloWorld"; jQuery.support.cors = true; //之前没有加这句老是提示no transport,我没去深想. $.ajax ({ type: "POST", contentType: "application/x-www-form-urlencoded",

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

    实例如下所示: //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]}'

  • JQuery的ajax获取数据后的处理总结(html,xml,json)

    1.html处理比较简单,直接输出即可.一般用$("jb51div").innerHTML等即可 2.json格式数据调用 复制代码 代码如下: $.ajax({ url : "/trundle/RawContentAction.getAjaxContent.act", data : "param1=22", dataType : "json",//这里的dataType就是返回回来的数据格式了html,xml,json ca

  • Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法

    1. 引入jquery和vue.js <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/vue/2.2.2/vue.min.js"

  • 详解vue 中使用 AJAX获取数据的方法

    在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascript"> new Vue({ el:'#app', data:{data:""}, created:function(){ var url="json.jsp"; var _self=this; $.get(url,function(data){ _se

  • Django中使用jquery的ajax进行数据交互的实例代码

    jquery框架中提供了$.ajax.$.get.$.post方法,用于进行异步交互,由于Django中默认使用CSRF约束,推荐使用$.get 示例:实现省市区的选择 最终实现效果如图: 将jquery文件拷贝到static/js/目录下 打开booktest/views.py文件,定义视图area1,用于显示下拉列表 #提供显示下拉列表的控件,供用户操作 def area1(request): return render(request,'booktest/area1.html') 打开bo

  • Ajax获取数据然后显示在页面的实现方法

    主要功能流程介绍 循环获取列表数据 点击列表数据进入详情页 点击报名参加弹出报名成功提示框 点击提示框中的确定按钮,跳回列表页 代码实现流程和解说 一.列表页 1.访问链接list.php时判断是pc端还是客户端 $user_agent_arr = mall_get_user_agent_arr(); if(MALL_UA_IS_PC == 1) { //****************** pc版 ****************** include_once './list-pc.php';

  • 页面向下滚动ajax获取数据的实现方法(兼容手机)

    页面向下滚动ajax获取数据的实现方法(兼容手机) $(window).scroll(function () { var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if (scrollTop + windowHeight >= scrollHeight) { loadPromotions(); } }); var pa

  • jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法

    jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Object.success,但后台能够返回数据,原代码如下: var source=[]; $.ajax({ type: "post", url: "connectdb/select.jsp", data: {database: "scmdb", selec

  • 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="请输入

  • jQuery中ajax的load()与post()方法实例详解

    本文实例讲述了jQuery中ajax的load()与post()方法.分享给大家供大家参考,具体如下: 一.load()方法 在jQuery ajax的load()方法能够载入远程 HTML 文件代码并插入至 DOM 中,这个与post,get还是有一点的区别,但可以快速在页面加载时就加载一个页面的html保存到dom中并且可执行哦. load()方法默认使用 GET 方式, 如果传递了data参数则使用Post方式. 传递附加参数时自动转换为 POST 方式.jQuery 1.2 中,可以指定

随机推荐