<!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. .NET HttpGet 获取服务器文件下的图片信息 同步和异步方式处理

    /// <summary> /// 项目文件夹下路径 返回流类型数据,如:图片类型 /// </summary> /// <returns></returns ...

  2. Generate google sitemap xml

    方式一. XNamespace xNamespace = "http://www.sitemaps.org/schemas/sitemap/0.9"; XNamespace xht ...

  3. Variable number of arguments (Varargs)

    A parameter of a function (normally the last one) may be marked with vararg modifier: fun <T> ...

  4. QT 信号槽connect中解决自定义数据类型或数组作为函数参数的问题——QT qRegisterMetaType 注册MetaType——关键：注册自定义数据类型或QMap等容器类

    一般情况下信号槽直接连接方式不会出现问题,但是如果信号与槽在不同线程或Qt::QueuedConnection方式连接,可能会在连接期间报以下类似问题,如: QObject::connect: Can ...

  5. 集合的最大缺点是无法进行类型判定（这个缺点在JAVA1.5中已经解决），这样就可能出现因为类型不同而出现类型错误。

    集合的最大缺点是无法进行类型判定(这个缺点在JAVA1.5中已经解决),这样就可能出现因为类型不同而出现类型错误. 解决的方法是添加类型的判断.      LinkedList接口(在代码的使用过程中 ...

  6. tomcat 配置 使用综合

    [参考]Tomcat 7.0安装与配置 [参考]tomcat 控制台日志(startup.bat)输出到指定文件中 [参考]将Java web应用部署到Tomcat 及部署到Tomcat根目录 的三种 ...

  7. 【Excel】输出CSV文本

    '******************************************************************************* ' CSV形式テキストファイル書き出す ...

  8. Python实现AD域认证

    Python 通过ldap进行ad域账号的校验. 首先需要安装python-ldap的模块 http://www.python-ldap.org/. 在这里用的是windows系统,当然比较容易,下载 ...

  9. 【中间件安全】Jboss安全加固规范

    1. 适用情况 适用于使用Jboss进行部署的Web网站. 适用版本:5.x版本的Jboss服务器 2. 技能要求 熟悉Jboss安装配置,能够Jboss进行部署,并能针对站点使用Jboss进行安全加 ...

  10. 编译lua动态库

    编译动态库,静态库参考https://blog.csdn.net/yzf279533105/article/details/77586747 centos默认安装了lua5.1,使用rpm删除,yum ...