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 生产者和消费者入门代码基础
这篇博文讲解Kafka 的生产者和消费者实例. 基础版本一 生产者 ProducerFastStart.java package com.xingyun.tutorial_1; import org. ...
- [elk]bin/elasticsearch-sql-cli使用
在探sql groupby语句 这个长久不用竟然忘记 part name age dep1 ara 22 dep1 arb 22 dep1 arc 22 dep2 ema 10 dep2 emc 11 ...
- 在.txt文件的首行写上.LOG后，后面每次对改文本文件进行编辑后，系统会自动在编辑内容后记录操作时间
在.txt文件的首行写上.LOG后,后面每次对改文本文件进行编辑后,系统会自动在编辑内容后记录操作时间
- Qt学习记录--02 Qt的信号槽机制介绍(含Qt5与Qt4的差异对比)
一 闲谈: 熟悉Window下编程的小伙伴们,对其消息机制并不陌生, 话说:一切皆消息.它可以很方便实现不同窗体之间的通信,然而MFC库将很多底层的消息都屏蔽了,尽管使用户更加方便.简易地处理消息,但 ...
- 【转】wpf 模板选择器DataTemplateSelector及动态绑定，DataTemplate.Triggers触发器的使用
通常,如果有多个 DataTemplate 可用于同一类型的对象,并且您希望根据每个数据对象的属性提供自己的逻辑来选择要应用的 DataTemplate,则应创建 DataTemplateSelect ...
- eclipse 查看变量或方法在什么地方被调用的快捷键和快速显示方法入参提示信息
为了用eclipse写代码的时候,不用方向键移动光标,可以设置如下快捷键, Line Up:Alt+i 光标向上 Line Down:Alt+k 光标向下 Line Start:Alt+u 移到 ...
- vMware 按装 MacOs
大概思路:1.vMware11 下载以管理员运行2.服务项按名称排序把四荐停止运行3.插件unlock 以管理员运行4.载入apple Mac os x 10.11文件5.打开虚拟机 wzfou如果报 ...
- java基础---->String和MessageFormat的format方法
这里介绍一下String和MessageFormat中的format方法的差异以及实现原理. String与MessageFormat的说明 一.两者的使用场景 String.format:for l ...
- 恒生UFX交易接口基本介绍说明
1.恒生UFT和UFX有什么区别? UFT是一个极速交易系统,UFX是一个统一接入系统.交易系统很显然是可以进行股票交易的,UFX是所有后台交易系统的接入系统,不管后台是什么样子的交易系统都是可以通过 ...
- Golang知识图谱
原:https://www.processon.com/view/link/5a9ba4c8e4b0a9d22eb3bdf0?from=timeline 百度脑图重制:http://naotu.bai ...