Ajax取PHP JSON数据并显示
<!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数据并显示的更多相关文章
- jquery通过ajax方法获取json数据不执行success
1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...
- jQuery Ajax异步处理Json数据详解
先我们来看一个官方的实例使用 AJAX 请求来获得 JSON 数据,并输出结果: $("button").click(function(){ $.getJSON("dem ...
- AJAX如何接收JSON数据
简介 在我们了解如何使用AJAX返回JSON数据的时候要先明白下列几点 1. JSON如何来表示对象的 2. JSON如何来表示数组的 var object = { "labId" ...
- jquery通过ajax方法获取json数据不执行success回调
问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述 ...
- Javascript实例技巧精选(6)—滚动鼠标中键读取Json数据分页显示网页内容
>>点击这里下载完整html源码<< 截图如下: 滚动鼠标中键读取Json数据分页显示网页内容,关键的Javascript如下: <script type="t ...
- spring mvc接收ajax提交的JSON数据，并反序列化为对象
需求:spring mvc接收ajax提交的JSON数据,并反序列化为对象,代码如下: 前台JS代码: //属性要与带转化的对象属性对应 var param={name:'语文',price:16}; ...
- 使用Ajax方式POST JSON数据包（转）
add by zhj: 用ajax发送json数据时注意两点, 第一,使用JSON.stringify()函数将data转为json格式的字符串,如下 data: JSON.stringify({ ...
- django 使用Ajax方式POST JSON数据包
示例1: js: function SaveAction(){ //点击 保存按键 var senddata = {"type":"A", "host ...
- 在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法
在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法 最近在做一个小东西,使用kindeditor上传图片的时候,自己写了一个上传的方法,按照协议规则通过ajax返回json ...
随机推荐
- Kafka#4：存储设计 分布式设计 源码分析
https://sites.google.com/a/mammatustech.com/mammatusmain/kafka-architecture/4-kafka-detailed-archite ...
- [MySQL Reference Manual]17 Group Replication
17 Group Replication 17 Group Replication 17.1 Group Replication后台 17.1.1 Replication技术 17.1.1.1 主从复 ...
- ssh连接服务器失败解决记录
故障:db2inst1用户无法通过ssh连接数据库服务器. 但是root用户可以连接,连接后su – db2inst1用户报错: su: cannot set user id: Resource te ...
- C# 正则表达式判断是否是数字、是否含有中文、是否是数字字母组合
//判断输入是否包含中文 不管你有没有输入英文,只要包含中文,就返回 true public static bool HasChinese(string content) { //判断是不是中文 st ...
- [转] tomcat 7/8 启动非常慢的解决方法
在日志中发现启动慢的地方: -- ::] INFO o.s.c.s.DefaultLifecycleProcessor - Starting beans -- ::] INFO o.s.web.con ...
- ss搭建
aliyun ecs ,hongkong , t5 , 1M, 1.卸载阿里云盾监控 wget http://update.aegis.aliyun.com/download/uninstall.sh ...
- FastJSON 设置默认参数，全局配置方式 和 一些使用方式、坑
如果要被序列化的对象含有一个date属性或者多个date属性按照相同的格式序列化日期的话,那我们可以使用下面的语句实现: 在应用的的Main方法体里配置全局参数: JSONObject.DEFFAUL ...
- vue+node+mongodb前后端分离博客系统
感悟 历时两个多月,终于利用工作之余完成了这个项目的1.0版本,为什么要写这个项目?其实基于vuejs+nodejs构建的开源博客系统有很多,但是大多数不支持服务端渲染,也不支持动态标题,只是做到了前 ...
- .net读取Excel转datatable、.net读取的Excel存在合并单元格并且转成datatable
项目中经常会遇到Excel导入数据,Excel的模板会可能是存在合并单元格的,模板如下图所示 读取时需要填充合并单元格的值,转成datatable单元格值时,填充合并单元格的值,如下图所示: 合并单元 ...
- iowait
https://www.cnblogs.com/fuyuanming/articles/6497005.html