<!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. [svc]linux紧急情况处理

    如何判断 Linux 服务器是否被入侵? w-last-history top-lsof-strace netstat CPU利用率很高 800%爆了 netstat find 文件 查/etc/rc ...

  2. vue及ElementUI环境搭建

    1. nodejs安装及npm安装 下载地址:https://nodejs.org/en/download/ 选择windows Installer 下载完成后 运行node-v8.11.1-x64. ...

  3. rm -rf python 实现 v0.1

    #coding=utf- import os def join(arr,join_falg): res = "" for a in arr: res += a+join_falg ...

  4. error connecting: Timeout expired 超时时间已到. 达到了最大池大小 错误及Max Pool Size设置

    [参考]Timeout expired 超时时间已到. 达到了最大池大小 错误及Max Pool Size设置 [参考][数据库-MySql] MySqlConnection error connec ...

  5. “Java是编译执行的语言”这句话对吗?

    现在让你谈谈对Java平台的理解,你是否会感觉内容过于庞大?这个问题是比较宽泛的,Java发展到现在已经不仅仅是语言这么简单了,Java平台涉及的,包括但不仅限于下面提到的这些内容: Java语言本身 ...

  6. javascript转义unicode十六进制编码且带有反斜杠后的html

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. php.ini 开发和线上配置的差异

    比对了一下php自带的php.ini-development和php.ini-production,备忘. display_errors = Ondisplay_startup_errors = On ...

  8. VS 错误: 未找到与约束contractname Microsoft.VisualStudio.Utilities.IContentTypeRegistryService

    今天突然停电,vs重启的时候就出现了问题,最开始是提示如图1所示的错误,开始觉得可能这提示不重要,也就关闭不在提醒了,结果,vs启动是启动了,项目也开启了,但是生成的时候,依旧就报了图1的错 图1 去 ...

  9. Oracle密码过期问题 ORA-28001:the password has expired

    如果已经过期了,首先需要修改密码,然后设置密码为无限期.修改以sys用户登陆. 修改密码:alter user username identified by password  密码可以和之前的密码相 ...

  10. 关于vmware虚拟机硬件里没有软盘驱动器,而操作系统里还有的解决方法

    问题描述:今天笔者使用VMware 11.1.0安装了一个windows 7的操作系统,安装完成后进入系统发现 在计算机里的[有可移动存储的设备]下有一个软盘驱动器(A:)如下图所示: 但回到虚拟里设 ...