<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>

        <title>Document</title>

    </head>

    <body style="padding-top: 30px;">

        <button id="btnJson">JSON</button>

        <table class="table"></table>

        <script type="text/javascript">

            $(function() {

                $("#btnJson").click(function() {

                    $.ajax({

                        type: "get",

                        url: "json.php",

                        dataType: "json",

                        async: true,

                        success: function(data) {

                            var item;

                            $.each(data, function(i, result) {

                                item = "<tr><td>" + result['city'] + "</td><td>" + result['phone'] + "</td></tr>";

                                $('.table').append(item);

                            });

                        }

                    });

                })

            })

        </script>

    </body>

</html>

JSON.PHP

<?php

    $host = '127.0.0.1';

    $user = 'root';

    $password = '';

    $database = 'yiibaidb';

    $conn = new mysqli($host, $user, $password, $database);

    if (!$conn) {

        die("数据库连接失败！" . $conn -> connect_error);

    }

    $sql = "SELECT * FROM `offices`";

    $result = $conn -> query($sql);

    $arr = array();

    if ($result -> num_rows > 0) {

        while ($rows = $result -> fetch_assoc()) {

            $arr[] = $rows;

        }

    }

    echo json_encode($arr);

    $conn -> close();

?>

Ajax取PHP JSON数据并显示的更多相关文章

  1. jquery通过ajax方法获取json数据不执行success

    1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...

  2. jQuery Ajax异步处理Json数据详解

    先我们来看一个官方的实例使用 AJAX 请求来获得 JSON 数据,并输出结果: $("button").click(function(){ $.getJSON("dem ...

  3. AJAX如何接收JSON数据

    简介 在我们了解如何使用AJAX返回JSON数据的时候要先明白下列几点 1. JSON如何来表示对象的 2. JSON如何来表示数组的 var object = { "labId" ...

  4. jquery通过ajax方法获取json数据不执行success回调

    问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述 ...

  5. Javascript实例技巧精选(6)—滚动鼠标中键读取Json数据分页显示网页内容

    >>点击这里下载完整html源码<< 截图如下: 滚动鼠标中键读取Json数据分页显示网页内容,关键的Javascript如下: <script type="t ...

  6. spring mvc接收ajax提交的JSON数据，并反序列化为对象

    需求:spring mvc接收ajax提交的JSON数据,并反序列化为对象,代码如下: 前台JS代码: //属性要与带转化的对象属性对应 var param={name:'语文',price:16}; ...

  7. 使用Ajax方式POST JSON数据包（转）

    add by zhj: 用ajax发送json数据时注意两点, 第一,使用JSON.stringify()函数将data转为json格式的字符串,如下 data: JSON.stringify({   ...

  8. django 使用Ajax方式POST JSON数据包

    示例1: js: function SaveAction(){ //点击 保存按键 var senddata = {"type":"A", "host ...

  9. 在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法

    在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法 最近在做一个小东西,使用kindeditor上传图片的时候,自己写了一个上传的方法,按照协议规则通过ajax返回json ...

随机推荐

  1. how-can-i-see-the-size-of-files-and-directories-in-linux

    https://stackoverflow.com/questions/11720079/how-can-i-see-the-size-of-files-and-directories-in-linu ...

  2. xorm中的几个坑

    项目中使用的是xorm,虽然用了很顺手了,可是还是会遇到一些坑,这里纪录一些. 结构体自动忽略空字段 在xorm中,结构体会自动忽略空字段(或则说默认值,比如int 的0 ,string的" ...

  3. 【iCore4 双核心板_uC/OS-II】例程五：信号量——共享资源

    一.实验说明: 信号量是操作系统中的一类事件,是实现任务间通信的一个中间环节.当系统中的多个任务 在运行时,经常需要互相无冲突地访问同一个资源,或者需要互相支持的依赖,甚至有时还要互 相加以必要的限制 ...

  4. 【iCore1S 双核心板_FPGA】例程十七：基于双口RAM的ARM+FPGA数据存取实验

    实验现象: 核心代码: module DUAL_PORT_RAM( input CLK_12M, inout WR, input RD, input CS0, :]A, :]DB, output FP ...

  5. Maven-设置默认Java编译版本

    有两种方式,一种针对项目,一种针对全局 针对项目,需要在pom.xml中添加如下配置: <build> <plugins> <plugin> <groupId ...

  6. 深入理解String类详解

    1.Stringstr = "eee" 和String str = new String("eee")的区别 先看一小段代码, 1 public static ...

  7. unity3D内嵌android项目

    1.从u3d中导出android工程  工程名为 HS5 2.as(AndroidStudio简写)中新建android工程 MyAndroid 3.HS5 以module方式导入到MyAndroid ...

  8. osg shader 相机观察矩阵逆矩阵 求顶点世界坐标

    uniform mat4 osg_ViewMatrixInverse;//osg内置uniform void main() { vec4 posWorld = osg_ViewMatrixInvers ...

  9. Docker-集群swarm（5）

     Docker集群的概念 群集是一组运行Docker并加入集群的计算机.在此之后,您继续运行您习惯使用的Docker命令,但现在它们由群集管理器在群集上执行.群中的机器可以是物理的或虚拟的.加入群组后 ...

  10. linux下GPRS模块使用AT命令实现拨接电话，发中英文短信

    开发板           :fl2440 cpu                :  s3c2440(arm9) 开发模块       :A7(GPRS/GPS) 远程登陆软件:PUTTY **** ...