<!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. 两台linux服务器各有两个不同的用户 其中一个服务器可以无密码登录服务器

    服务器A:普通用户USERA 服务器B:普通用户USERB 把USERA的公钥写入服务器B用户USERB的authorized_keys中 USERA能普能用户登录然后服务器A,然后再登录服务器B: ...

  2. Openfire 单人聊天和多人聊天（发送消息、接收消息）

    Openfire 单人聊天和多人聊天(发送消息.接收消息) 一.单人聊天 1)发送消息: 首先要获取一个聊天窗口,getConnection()为获取连接connection的方法,调用getFrie ...

  3. 微信redirect_uri域名与后台配置不一致，错误代码10003

    现象 做好了微信公众号扫描登录后,很稳定的运行,后来增加了微信开放平台,结果偶尔就出现了这个redirect_uri错误.然后重启服务器后,又正常. 探查 网上的说法都是网页授权配置的问题,检查微信公 ...

  4. Virtual配置

    没有ifconfig yum upgrade yum install net-tools yum源配置: https://jingyan.baidu.com/article/215817f7aef2e ...

  5. linux添加新磁盘和创建分区

    Linux磁盘概念及其管理工具fdisk:http://www.linuxidc.com/Linux/2016-08/134664.htm 一. 进入linux虚拟机 右键 open in termi ...

  6. Windows 性能监视器的基本指标说明（CPU,内存,硬盘参数）

    [转]Windows 性能监视器的基本指标说明(CPU,内存,硬盘参数) 作为一个系统工程师来说,要看懂监控的数据至关重要,关系着优化和分析出现的问题.我是在运维过程中要用到的.因此,今天给出Wind ...

  7. dedecms调用子栏目及文章列表

    使用DEDECMS程序建网站时,有些栏目下面有子栏目,我们需要在网站前台调用出子栏目以及子栏目下的文章列表. dedecms调用子栏目及文章列表可以使用以下的代码进行调用: <div class ...

  8. python机器学习包 Windows下 pip安装 scikit-learn numpy scipy

    1.到PIP的目录中C:\Python34\Scripts;2. 2.1  pip安装numpy pip install numpy 2.2  pip安装sklearn pip install -U ...

  9. RxAndroid防止内存泄露

    RxJava并不会自动防止这种情况发生,好在它可以很容易地防止内存泄露.Observable.subscribe()方法会返回一个Subscription对象,这个对象仅仅有两个方法:isSbscri ...

  10. SQL Server清空日志以及查看日志大小语句

    为了安全起见,使用的时候,先数据备份一遍 作者hongb:SQL Server:查看SQL日志文件大小命令:dbcc sqlperf(logspace) https://www.cnblogs.com ...