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

主要功能流程介绍

循环获取列表数据

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

点击列表数据进入详情页

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

点击报名参加弹出报名成功提示框

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';

}
else
{

  //****************** wap版 ******************
  include_once './list-wap.php';

} 

2、如果是wap版就跳转到 list-wap.php 页面,载入 list.tpl.htm页面

$pc_wap = 'wap/';
$tpl = $my_app_pai->getView(TASK_TEMPLATES_ROOT.$pc_wap.'trade/list.tpl.htm');

3、list.tpl.htm 页面进行渲染模板

HTML

<div class="page-view " data-role="page-container">

    <div class="sales-list-page">
      <div id="render-ele"></div>
    </div>

  </div>

JS

$(function()
  // 渲染模块
  {
    //请求php的url
    var TRADE_AJAX_URL = window.$__ajax_domain + 'get_trade_list.php';
    //获取已经封装在list.js里面的一个对象list_item_class
    var list_item_class = require('../../../../modules/list/list.js');
    //获取模板块
    var template = __inline('./list-item.tmpl');

    var list_obj = new list_item_class({
      ele : $("#render-ele"),//渲染数据到id为render-ele中
      url : TRADE_AJAX_URL,//请求数据连接
      template : template //渲染的模板
    });

  });

list-item.tmpl模板内容(循环的列表内容)

<div class="item-wrap">
  {{#each list}}
  {{#if is_enroll}}
  <a href="./detail.php?topic_id={{id}}&state=is_enter">
  {{else}}
  <a href="./detail.php?topic_id={{id}}&state=no_enter">
  {{/if}}
    <div class="item ui-border-b" >
      <div class="img-item">
        <i class="img" style="background-image: url({{img}});">

        </i>
      </div>
      <div class="text-item">
        <div class="txt-con-1">
          <h3 class="title f14">{{title}}</h3>
          <p class="txt f10 color-999">所属品类:{{type}}</p>

        </div>
        <div class="txt-con-2">
          <span class="color-333 join-in ">
            {{ enroll_text }}
          </span>

        </div>
      </div>
    </div>
  </a>
  {{/each}}
</div>

4、list.js进行数据处理,仅是对象的部分方法,具体的方法请自行写。

 _self.ajax_obj = utility.ajax_request
({
  url : self.send_url,
  data : self.ajax_params,
  beforeSend : function()
  {
self._sending = true;
_self.$loading = $.loading
({
  content:'加载中...'
});

  },
  success : function(data)
  {
self._sending = false;
//获取数据
var list_data = data.result_data.list;
console.log(data);
//渲染前处理事件
self.$el.trigger('list_render:before',[self.$list_container,data]);

_self.$loading.loading("hide");

//是否有分页
self.has_next_page = data.result_data.has_next_page;

// 无数据处理
if(!list_data.length && page == 1)
{
  abnormal.render(self.$render_ele[0],{});

  self.$load_more.addClass('fn-hide');

  return;
}
else
{
  self.$load_more.removeClass('fn-hide');
}

//把数据放入模板
var html_str = self.template
({
  list : list_data
});
//插入渲染列表
self.$list_container.append(html_str);
//渲染后处理事件
self.$el.trigger('list_render:after',[self.$list_container,data,$(html_str)]);

self.setup_event();
  },
  error : function()
  {
self._sending = false;
_self.$loading.loading("hide");
$.tips
  ({
content:'网络异常',
stayTime:3000,
type:'warn'
  });
  }
})

5、get_trade_list.php接收到前端页面发过来的请求,然后进行数据收集处理最终返回数据给前台页面

// 接收参数
$page = intval($_INPUT['page']);

if(empty($page))
{
  $page = 1;
}

// 分页使用的page_count
$page_count = 5;

if($page > 1)
{
  $limit_start = ($page - 1)*($page_count - 1);
}
else
{
  $limit_start = ($page - 1)*$page_count;
}

$limit = "{$limit_start},{$page_count}";

//请求数据库的借口
$sales_list_obj = POCO::singleton ( 'pai_topic_class' );
$ret = $sales_list_obj-> get_task_list(false, '', 'id DESC', $limit);

// 输出前进行过滤最后一个数据,用于真实输出
$rel_page_count = 4;

$has_next_page = (count($ret)>$rel_page_count);

if($has_next_page)
{
  array_pop($ret);
}

$output_arr['page'] = $page;

$output_arr['has_next_page'] = $has_next_page;

$output_arr['list'] = $ret;

// 输出数据
mall_mobile_output($output_arr,false);

6、前端页面接收到get_trade_list.php返回的数据,从而进行判断将数据库的内容显示在前台页面中。模板输出

$tpl->output();

详情页

1、点击列表页进入详情页(detail.php)

detail.php页面 接收 列表传过来的数据

//接收list传过来的参数
$topic_id = intval($_INPUT['topic_id']);
$state = $_INPUT['state'];

if (empty($topic_id))
{
  header("location: ".'./list.php');
}

//数据库借口
$trade_detail_obj = POCO::singleton ( 'pai_topic_class' );
$ret = $trade_detail_obj->get_task_detail($topic_id,$yue_login_id);

2、判断是pc端还是客户端(类似列表页)

3、跳转到detail-wap.php加载模板detail.tpl.htm同时也带参数过去

$pc_wap = 'wap/';
$tpl = $my_app_pai->getView(TASK_TEMPLATES_ROOT.$pc_wap.'trade/detail.tpl.htm');

//模板附带以下三个参数到detail.tpl.htm中
$tpl->assign('ret', $ret);
$tpl->assign('topic_id', $topic_id);
$tpl->assign('state', $state);

4、页面引用对象ret中的字段

<div class="sales-detail-page">
  <div class="item-wrap">
<div class="item-1 item">
  <div class="img-item">
<i class="img" >
<img src="{ret.img}"/>
</i>
  </div>
  <div class="txt-item">
<h3 class="title f16 color-333 fb">{ret.title}</h3>
<p class="sign-in-txt color-666">
  {ret.enroll_text}
</p>
  </div>
</div>

<div class="item-3 item">
  <div class="txt-item">
<h3 class="title f14 color-333 fb">生意机会详情</h3>
<div class="txt-con f14 color-666">
  <p class="txt">{ret.content}</p>
</div>
  </div>
</div>
  </div>
  <div class="sign-name-item">
  <!-- IF state = "is_enter" -->
<button class="ui-button-submit had-joined">
  <span class="ui-button-content">已参加</span>
</button>
  <!-- ELSE -->
  <button class="ui-button-submit" id="submit">
<span class="ui-button-content">报名参加</span>
  </button>
  <!-- ENDIF -->
  </div>
</div>

5、点击报名参加按钮进行数据处理

var _self = {};
$btn.on('click', function() {
  var data =
  {
topic_id : {ret.id}
  }
  utility.ajax_request({
url : window.$__ajax_domain+'add_task_enroll_trade.php',
data : data,
type : 'POST',
cache : false,
beforeSend : function()
{
  _self.$loading = $.loading({
content : '发送中.....'
  });
},
success : function(data)
{
  _self.$loading.loading("hide");
  //请求成功后显示成功报名提示框,点击报名提示框确定按钮跳回列表页面
if (data.result_data.result==1)
{
var dialog = utility.dialog
({
  "title" : '' ,
  "content" : '提交成功,点击确定返回',
  "buttons" : ["确定"]
});
 dialog.on('confirm',function(event,args)
   {
   window.location.href = document.referrer;
   });

  return;
   }

},
error : function()
{
  _self.$loading.loading("hide");
  $.tips({
content : '网络异常',
stayTime : 3000,
type : 'warn'
  });
}

  });

});

以上这篇Ajax获取数据然后显示在页面的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2016-08-20

yii2使用ajax返回json的实现方法

本文实例讲述了yii2使用ajax返回json的实现方法.分享给大家供大家参考,具体如下: public function actionAjax() { if(isset(Yii::$app->request->post('test'))){ $test = "Ajax Worked!"; // do your query stuff here }else{ $test = "Ajax failed"; // do your query stuff he

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

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

ajax 三种实现方法实例代码

ajax即异步的javascript and xml, 本文章向码农们介绍ajax的三种实现方法(prototype实现,jquery实现,XMLHttpRequest实现) 本文主要是比较三种实现Ajax的方式,为以后的学习开个头. 准备: 1.  prototype.js 2.  jquery1.3.2.min.js 3.  json2.js 后台处理程序(Servlet),访问路径servlet/testAjax: Java代码 package ajax.servlet; import j

jquery的ajax和getJson跨域获取json数据的实现方法

很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端利用jquery就可以读取任何站点的数据了.近日在进行开 发时,因为要和第三方公司的一个项目进行数据的共享,因为考虑多不占用服务器的资源,遂决定直接在html进行数据的读取,不走服务器端进行中转了.然后 正好就遇到了浏览器端跨域访问的问题. 跨域的安全限制都是指浏览器端来说的,服务器端不存在跨域安全限制的问题. 目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jso

JSP+jquery使用ajax方式调用json的实现方法

本文实例讲述了JSP+jquery使用ajax方式调用json的实现方法.分享给大家供大家参考,具体如下: 前台: <script type="text/javascript" src="jquery-1.5.1.min.js"></script> <script type="text/javascript"> //test function test(uid) { if(confirm("确定该用户

详解PHP+AJAX无刷新分页实现方法

PHP+AJAX无刷新分页实现代码详解,最近在看ajax 教程,就想写个简单入门的PHP+AJAX无刷新分页,我们依据ajax开发框架,代码如下: var http_request=false; function send_request(url){//初始化,指定处理函数,发送请求的函数 http_request=false; //开始初始化XMLHttpRequest对象 if(window.XMLHttpRequest){//Mozilla浏览器 http_request=new XMLH

Ajax学习笔记---3种Ajax的实现方法【推荐】

Ajax:  Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据. (一) Ajax历史....了解性知识 Ajax归属于Web前端开发技术, 与javascript有着异常紧密的联系. Ajax就是一种实现异步通信无刷新的技术, 而这种技术可以有很多种实现方式. 浏览器的鼻祖网景(NetScape)公司

基于ajax的简单搜索实现方法

本文实例讲述了基于ajax的简单搜索实现方法.分享给大家供大家参考,具体如下: 这里使用两个.aspx文件,一个叫Default.aspx,一个叫AjaxOperations.aspx,第一个用来输入搜索数据,后一个用来对搜索关键字进行处理.js文件夹下面还有一个testJs.js的文件,它就是ajax操作的核心部分.不错,code is cheap.看代码: testJs.js // 此函数等价于document.getElementById /document.all function $(

ThinkPHP通过AJAX返回JSON的两种实现方法

本文实例讲述了ThinkPHP通过AJAX返回JSON的两种实现方法.分享给大家供大家参考.具体方法如下: 方法一: php代码如下: 复制代码 代码如下: $arr = array( 'name'=>$picname, 'pic'=>$pics, 'size'=>$size ); $this->ajaxReturn (json_encode($arr),'JSON'); JS部分代码如下: 复制代码 代码如下: var d=eval('('+d+')');//json转成obje

jsp页面 列表 展示 ajax异步实现方法

1. 服务端先返回页面基本结构(如message.jsp), <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ tag

请求转发jsp页面乱码问题的快速解决方法

•在最近的项目中 使用了jsp+servlet来开发项目,但是由于后台的不太熟练 导致了困难重重.所幸 学习能力还可以 一边做一遍学吧. •今天的问题:请求转发后页面的乱码问题 •由于特殊原因--图片上传的form表单无法通过ajax提交 因此必须使用form表单直接提交.但是这样会导致一个问题:前后台交互的时候效果不好.为什么效果不好?这里说的不是功能的问题.作为web开发者,客户的体验我们要放在第一位.因此,我们必须将对客户的信息反馈放在一个比较重要的地位.说白了,就是上传个图片成没成功?我

jsp页面常用的查询及显示方法分析

本文实例讲述了jsp页面常用的查询及显示方法.分享给大家供大家参考,具体如下: 背景: 1. 需要将数据库查询结果在JSP中以列表方式显示 2. 在一个良好的J2EE模式中数据库查询一般用DAO实现(Data Access Object), JSP仅用于显示数据 方法一: 建一个类,将查询出的结果封装到该类中,然后将该类对象添加到List中.(这个也是我最开始时用的方法,不通用且太麻烦了). 方法二: 在介绍方法二的时候,我们先来看看如何把ResultSet转化为List吧,代码如下: priv

jsp页面传参乱码的解决方法

jsp页面传参乱码的解决方法 jsp页面js: encodeURIComponent要使用两次encodeURIComponent(encodeURIComponent(userAccount)); java:String  userAccount = java.net.URLDecoder.decode(userAccount,"UTF-8");/*需要处理异常*/ 纯属个人备注,以便后期使用

在JSP页面中获取当前日期时间的方法

1. <SCRIPT LANGUAGE="JavaScript"> var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-????) myDate.getMonth(); //获取当前月份(0-11,0代表1月) myDate.getDate(); //获取当前日(1-31) myDate.getDay(); //获取当前星期X(0-6,

浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法

在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们发现程序执行完后并没有获取到我们想要的值,这时很有可能是因为你用的是ajax的异步调用async:true(默认情况),如: 复制代码 代码如下: function ManageCommentText(text) {var result = text;$.ajax({data: "get",url: "GetComments.aspx",data: "typ

使用js声明数组,对象在jsp页面中(获得ajax得到json数据)

1.在jsp页面的js中可以用jsp标签 var patientInfoList={patientId:"${session.patientId}"};var docDepList=[],noTypeMap=["","普通号","主治医生号","副主任医师号","主任医师号"]; <c:forEach varStatus="idx" var="list

JSP页面中文参数的传递(get和post方法分析)

在项目中,我们经常遇到需要在JSP页面切换中传递中文字符.这主要有两种方式. ◆URL方式 例如: http://website/test1.jsp?act=add&type=苹果&param=%20D%20B ◆FORM方式 例如: 复制代码 代码如下: ﹤form name=test   mehtod="post"﹥   ﹤input type=hidden name=text2 value="中文"﹥   ﹤input type=text na

在jsp页面中响应速度提高的7种方法分享

方法一:在servlet的init()方法中缓存数据当应用服务器初始化servlet实例之后,为客户端请求提供服务之前,它会调用这个servlet的init()方法.在一个servlet的生命周期中,init()方法只会被调用一次.通过在init()方法中缓存一些静态的数据或完成一些只需要执行一次的.耗时的操作,就可大大地提高系统性能.例如,通过在init()方法中建立一个JDBC连接池是一个最佳例子,假设我们是用jdbc2.0的DataSource接口来取得数据库连接,在通常的情况下,我们需要

ajax跳转到新的jsp页面的方法

ajax可以实现局部刷新页面,即在不刷新整个页面的情况下更新页面的局部信息. 项目中遇到一个问题:在用户列表也,当点击某个按钮时需要去查询用户的信息,查询成功跳转到用户详情界面:查询失败,则在原页面弹出提示信息. 想到两个解决办法: 方法一: 点击按钮,调用普通方法去查询用户信息,查询成功跳转到用户详情页面:查询失败,重定向调用查询用户列表的方法,在查询用户列表的方法结束后重新跳转到用户列表页面并弹出提示信息,相当于重新加载了用户列表页面. 方法二: 根据需求,不可以重新加载用户列表页面.用aj