<!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. 从yield 到yield from再到python协程

    yield 关键字 def fib(): a, b = 0, 1 while 1: yield b a, b = b, a+b yield 是在:PEP 255 -- Simple Generator ...

  2. ffmpeg-hls实现分析

    [时间:2018-05] [状态:Open] [关键词:流媒体,stream,HLS, ffmpeg, demuxer,avformat] 0 引言 本文将关注于FFmpeg中的HLS相关实现,相关代 ...

  3. 微信小程序——购物车结算

    项目需要做个购物车结算功能,先分析需求: 1.全选,反选的功能.当选中的个数 = 购物车的数量时,勾选全选按钮,反之则取消选中全选按钮: 2.改变选中状态时,计算总价和总数量: 3.单个产品的数量加减 ...

  4. tensorflow中moving average的用法

    一般在保存模型参数的时候,都会保存一份moving average,是取了不同迭代次数模型的移动平均,移动平均后的模型往往在性能上会比最后一次迭代保存的模型要好一些. tensorflow-model ...

  5. iOS - UITableView reloadData滚动到顶部无效问题解决

    //tableView:动态cell的高度不固定,滑动不到最顶部 //if (self.sensorDate.count > 0) { // [self.tableView scrollToRo ...

  6. axios 使用post方式传递参数，后端接受不到

    参考 https://segmentfault.com/a/1190000012635783

  7. java开学考试有感以及源码

    一.感想 Java开学测试有感 九月二十号,王老师给我们上的第一节java课,测试. 说实话,不能说是十分有自信,但还好,直到看见了开学测试的题目,之前因为已经做过了王老师发的16级的题目,所以当时还 ...

  8. PHP中递归的实现（附例子）

    递归函数是一种调用自己的函数.写递归函数时要小心,因为可能会无穷递归下去.必须确保有充分的方法来终止递归. 一:使用参数引用完成递归函数.操作的是同一块内存地址. <?php $i=1; fun ...

  9. thymeleaf(一）

    (一)Thymeleaf 是个什么?      简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下 ...

  10. 腾讯地图key秘钥

     腾讯地图key:5WNBZ-2JYR6-SPUSL-M3WGH-U4KDT-K2FYV