ajax实现从后台拿数据显示在HTML前端的方法
HTML页面,ajax是基于id的,所有用id表示。
拿到的数据会显示在这里
<div id="test"></div>
ajax源码:
$(document).ready(function() { $.ajax({ url : "admin/get_online_ganbu.php",//后台请求的数据,用的是PHP dataType : "json",//数据格式 type : "post",//请求方式 async : false,//是否异步请求 success : function(data) { //如果请求成功,返回数据。 var html = ""; for(var i=0;i<data.length;i++){ //遍历data数组 var ls = data[i]; html +="<span>测试:"+ls.name+"</span>"; } $("#test").html(html); //在html页面id=test的标签里显示html内容 }, }) })
php源码:
<?php include "conn.php";//这是链接数据的。 $result = mysql_query("SELECT * FROM online where class =1 "); $dataarr = array(); while($row = mysql_fetch_array($result)){ array_push($dataarr, $row); } mysql_close($con); echo json_encode($dataarr); ?>
以上这篇ajax实现从后台拿数据显示在HTML前端的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
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';
-
jquery 通过ajax请求获取后台数据显示在表格上的方法
1.引入bootstrap和jquery的cdn <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="external nofollow" > <script type="text/javascript"
-
ajax接收后台数据在html页面显示
Java代码 PrintWriter out=response.getWriter(); //向客户端发送字符数据 response.setContentType("text/text"); //设置请求以及响应的内容类型以及编码方式 response.setCharacterEncoding("UTF-8"); JSONArray json = JSONArray.fromObject(newsList); //将newsList对象转换为json对象 Strin
-
ajax实现从后台拿数据显示在HTML前端的方法
HTML页面,ajax是基于id的,所有用id表示. 拿到的数据会显示在这里 <div id="test"></div> ajax源码: $(document).ready(function() { $.ajax({ url : "admin/get_online_ganbu.php",//后台请求的数据,用的是PHP dataType : "json",//数据格式 type : "post",//请
-
有关文件上传 非ajax提交 得到后台数据问题
下文给大家介绍文件上传非ajax提交得到后台数据的操作方法,具体详情如下所示: <form name="configForm" id="configForm" method="post" action="" > .......... </form> 根据id获得表单数据然后发送ajax请求,获得后台返回数据,处理数据,完美. 但是如果需要上传文件, <tr> <td class=&qu
-
js+ajax处理java后台返回的json对象循环创建到表格的方法
本文实例讲述了js+ajax处理java后台返回的json对象循环创建到表格的方法.分享给大家供大家参考,具体如下: //注:LO是表格的id: 需要自己创建表头, n行,9列的表格: var tab_id; function varify(cardinno) { tab_id=document.getElementById("Layer1"); displayDiv(); tab_id.style.display="none"; var url="get
-
jQuery progressbar通过Ajax请求实现后台进度实时功能
本文主要演示Jquery progressbar的进度条功能.js通过ajax请求向后台实时获取当前的进度值.后台将进度值存储在cookie中,每次请求后,将进度条的值增2个.以此演示进度条的实时显示功能. 前台index.jsp jsp代码如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = reques
-
解决ajax提交到后台数据成功但返回不走success而走的error问题
下面是ajax代码和Controller层代码,期初以为是后台程序写错了. $("#sourcefile").ajaxSubmit({ type: "post", dataType: "json", // 'xml', 'script', or 'json' (expected server response type) url: "/springMVC/upload/up", success: function (resul
-
Ajax请求PHP后台接口返回信息的实例代码
前台就是一个表单,这里是用的bootstrop的 <form method="post" > <!-- token验证 --> <!--{{ csrf_field() }}--> <div class="form-group" style="width:30%"> <label for="exampleInputPassword1">昵称</label>
-
ajax异步读取后台传递回的下拉选项的值方法
jsp中html相关代码 <tr> <td class="tdcell_word2">请选择展会:</td> <td class="tdcell_word3" colspan="3"> <select name="select" id="jieci" onchange="getChange()"> <option valu
-
js使用ajax传值给后台,后台返回字符串处理方法
之前使用js获取后台生成的JSON字符串,然后给select填充值,这次需要重新获取一次. 这里的目标是,在一个input输入框里,输入一个用户名,判断是否为空,是否不存在,如果存在返回几个字段给前台,前台再绑定到其他input上 直接垒代码 HTML页面 <code class="language-html"><input type="text" id="iusername" runat="server"
-
关于Ajax异步请求后台数据进行动态分页功能
ajax请求后台拿到json类型的数据后,可以在它的success回调方法中进行动态分页,也就是表格重绘,此时,我们需要得到的数据包括:查询得到的数据.数据总条数.总页数.当前页数,其中前三条可在后台获取,对于当前页数,需要从前端获取点击页数再通过请求传递给后台,后台做完相应处理后再传回给前端. 请看如下例子: /** * * @param page 当前页 */ function getData(page){ var schoolid = $("#schoolid option:selecte
随机推荐
- PHP+jQuery 注册模块的改进(一):验证码存入SESSION
- Yii2.0小部件GridView(两表联查/搜索/分页)功能的实现代码
- vbs后台运行bat删除自身的代码
- 创建公共调用 jQuery Ajax 带返回值
- vue监听滚动事件实现滚动监听
- 浅析js预加载/延迟加载
- vbs Size 属性使用介绍(获取文件大小)
- Java基于正则表达式获取指定HTML标签指定属性值的方法
- php上传文件中文文件名乱码的解决方法
- PHP数组排序之sort、asort与ksort用法实例
- Ajax实现页面自动刷新实例解析
- 一个浙江人的23条经典经商法则!想成功必看
- Android 实现自动打电话与发短信的实例
- PHP中使用localhost连接Mysql不成功的解决方法
- 浅谈JavaScript数据类型
- 一个月入门Python爬虫学习,轻松爬取大规模数据
- 妙用缓存调用链实现JS方法的重载
- pygame游戏之旅 添加icon和bgm音效的方法
- js调用设备摄像头的方法
- 易语言制作情人节表白软件