<!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. DB2修改自增主键起始值

    ALTER TABLE DB2INSTL.BT_AUDIT_COUNTY_DIFF_HISTORY_PX ALTER COLUMN ID RESTART WITH 18239

  2. Mac 终端Terminal光标移动快捷键

    声明: 转载自: http://blog.csdn.net/lgm252008/article/details/8253519 在Mac系统中并没有Home.End等键,所以在使用时并不是特别的顺手, ...

  3. 当我们用自定义的类对象作为key时,我们必须在程序中覆盖HashCode()和equals()。

    Key值既然可以作为对象,那么也可以用一个自定义的类.比如: m.put(new sutdent(“Liucy”,30),”boss”) 如果没有语句来判定Student类对象是否相同,则会全部打印出 ...

  4. mac下安装mysql5.7.18,连接出现Access denied for user 'root'@'localhost' (using password: YES)

    mac下,mysql5.7.18连接出错,错误信息为:Access denied for user 'root'@'localhost' (using password: YES) ()里面的为she ...

  5. Mysql获取最大自增ID(auto_increment)的五种方式及其特点

    在关系型数据库的表结构中,一般情况下,都会定义一个具有‘AUTO_INCREMENT’扩展属性的‘ID’字段,以确保数据表的每一条记录都有一个唯一标识. 而实际应用中,获取到最近最大的ID值是必修课之 ...

  6. mysql数据字段整理

    <?php header('content-type:text/html;charset=utf-8'); define('DB_HOST','127.0.01'); define('DB_US ...

  7. [ICLR'17] DEEPCODER: LEARNING TO WRITE PROGRAMS

    DEEPCODER: LEARNING TO WRITE PROGRAMS Basic Information Authors: Matej Balog, Alexander L. Gaunt, Ma ...

  8. LeetCode - 868. Binary Gap

    Given a positive integer N, find and return the longest distance between two consecutive 1's in the ...

  9. C#串口小助手

    做技术的通病,什么都想学,什么都想亲手做一遍.不然总感觉心里不踏实. 考研期间,利用晚上一点时间,照葫芦画瓢,练习使用c#快速开发一个简单的串口小助手. 这种前后端分离的设计方法,大大提高了开发速度, ...

  10. Visual Studio Many Projects in One Solution VS中多工程开发

    在用VS开发项目的时候,我们可以将不同的模块拆分开来,分别建立单独的Project来开发调试,整个放到一个Solution中就行了.这样做的好处是结构清晰,每个功能模块可以单独调试,而不用编译整个So ...