ajax实现从后台拿数据显示在HTML前端的方法

2024-07-31 03:34:09

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接收后台数据在html页面显示

Java代码 PrintWriter out=response.getWriter(); //向客户端发送字符数据 response.setContentType("text/text"); //设置请求以及响应的内容类型以及编码方式 response.setCharacterEncoding("UTF-8"); JSONArray json = JSONArray.fromObject(newsList); //将newsList对象转换为json对象 Strin
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获取数据然后显示在页面的实现方法

主要功能流程介绍循环获取列表数据点击列表数据进入详情页点击报名参加弹出报名成功提示框点击提示框中的确定按钮,跳回列表页代码实现流程和解说一.列表页 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实现从后台拿数据显示在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" >   <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

ajax实现从后台拿数据显示在HTML前端的方法

相关推荐

随机推荐