1.表结构

我在教程示例中使用users表。CREATE TABLE `users` (

`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,

`fname` varchar(80) NOT NULL,

`lname` varchar(80) NOT NULL,

`username` varchar(80) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

2.配置

创建新的config.php文件。

完整的代码<?php

$host ="localhost"; /* Host name */

$user ="root"; /* User */

$password =""; /* Password */

$dbname ="tutorial"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);

// Check connection

if (!$con) {

die("Connection failed:" . mysqli_connect_error());

}

3. HTML

你可以在页面中下载,并包含angular.min.js或者使用CDN。

定义

用于显示数据创建

完整的代码

How to get data from MySQL with AngularJS - PHP

First name Last name Username
{{user.fname}} {{user.lname}} {{user.username}}

4. PHP

创建getData.php文件。

从这里返回JSON数组,其中包含用户详细信息(fname,lname和username )。

完整的代码include 'config.php';

$sel = mysqli_query($con,"select * from users");

$data = array();

while ($row = mysqli_fetch_array($sel)) {

$data[] = array("fname"=>$row['fname'],"lname"=>$row['lname'],"username"=>$row['username']);

}

echo json_encode($data);

5.脚本

在控制器(用户控制)中创建新模块,并设置AJAX请求。路径-传递文件名在url中,并将method设置为get,

成功reponse.data AJAX成功回调处理,其中将存储到$scope.users,

在HTML端使用ng-repeat指令显示数据。

完整的代码

var fetch = angular.module('myapp', []);

fetch.controller('userCtrl', ['$scope', '$http', function ($scope, $http) {

$http({

method: 'get',

url: 'getData.php'

}).then(function successCallback(response) {

// Store response data

$scope.users = response.data;

});

}]);

6.结束语

Angular提供$http服务,可以对服务器进行AJAX调用。

和jQuery AJAX请求类似,你可以发送get或POST type请求,在教程示例中,我从$http发送get请求,以JSON格式从MySQL数据库获取数据。如果你认为本教程对你有所帮助,请不要忘记分享。

angularjs 读取mysql_如何使用AngularJS PHP从MySQL获取数据相关推荐

  1. ogg oracle 到mysql_借助OGG完成Oracle到MySQL的数据迁移

    现在有个任务是需要把Oracle的数据迁移到MySQL,因为就涉及到了几个表,所以我最先想到了使用spool把Oracle的数据导成txt文件,然后再load 进去MySQL.非常遗憾的是,我的有一个 ...

  2. php 上传 读取 excel,php上传excel表格并获取数据

    这个是最近需要做的一个功能,在网上也查看了很多相关的文章,基本上大同小异,在这里整理一下. 一:首先是html部分 二:就是去接收和处理上传的文件了.php部分 //文件存放的路径 $save_pat ...

  3. kotlin读取html,kotlin 使用skrape {it}从html获取数据 - 糯米PHP

    查看语法,我假设您使用的是0.6.0版.您必须使用更特定的CSS选择器. data class MyScrapedData( val userName: String, val link: Strin ...

  4. AngularJS学习笔记之一: AngularJS入门

    2019独角兽企业重金招聘Python工程师标准>>> ‍一.AngularJS是什么?‍ AngularJS是由Misko Hevery 和 Adam Abrons 两个人共同创建 ...

  5. AngularJS开发指南7:AngularJS本地化,国际化,以及兼容IE低版本浏览器

    AngularJS本地化,国际化 国际化,简写为i18n,指的是使产品快速适应不同语言和文化. 本地化,简称l10n,是指使产品在特定文化和语言市场中可用. 对开发者来说,国际化一个应用意味着将所有的 ...

  6. Think in AngularJS :对比 jQuery 和 AngularJS 的不同思维模式

    原帖:http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background 最 ...

  7. 【AngularJs学习笔记五】AngularJS从构建项目开始

    为什么80%的码农都做不了架构师?>>>    #0 系列目录# AngularJs学习笔记 [AngularJs学习笔记一]Bower解决js的依赖管理 [AngularJs学习笔 ...

  8. AngularJs 入门系列-1 使用 AngularJs 搭建页面基本框架

    每当看到前端程序员在脚本.样式.表单处理逻辑中苦苦挣扎的时候,我就在想,为什么不用Angular Js 呢? Angular Js 支持页面前端的 MVC 模式开发,在 Angular JS 的支持下 ...

  9. angularjs学习笔记一——了解angularjs、开发环境搭建、第一个angularjs程序

    一.什么是angularJS angularJS是基于javascript的框架,所谓框架,自然就是封装了很多功能,举个例子,使用原生javascript,如果你要写一个网页幻灯片,你可能需要几十行代 ...

最新文章

  1. 如何在新浪博客中添加JavaScript代码
  2. 关于在node.js 中使用formData 发送axios上传文件失败解决方案
  3. vue04-components
  4. SQL Server 2005 Service Pack 2 – CTP December 2006发布
  5. linux svn上传目录_Linux系统下svn更新自动同步到web目录
  6. 学习zookeeper基础知识
  7. #pragma pack 用法详解
  8. 什么?云数据库也能C位出道?
  9. rails 2.3.5 + jquery ui datepicker 不能显示中文
  10. 金庸群侠传 3小时爆机
  11. 微信【PC电脑版】消息提示音怎么还原
  12. mysql 锁住一行数据_MySQL-锁
  13. Visual studio 2015(VS2015)的下载和安装,以及安装VS2015中的C++
  14. 微积分演绎(一)海底沉尸事件
  15. HAN - Heterogeneous Graph Attention Network 异构图注意力网络 WWW 2019
  16. 与“十“俱进 阿里数据库运维10年演进之路 1
  17. 通用样式 -表格的每行的复选框选中打印
  18. LaTeX插入参考文献
  19. 关于mavon-editor中iframe 的使用 和插入视频、音频的记录
  20. Java实验4-1【数组下标越界异常处理】

热门文章

  1. centos 开机启动java_Centos 7将java jar包自定义开机启动服务
  2. mysql三大范式 答案_数据库三大范式的个人理解~!
  3. 怎样制作html插件,自己动手制作一个Chrome插件 入门级
  4. 浅谈linux字符设备注册
  5. 用哈希桶实现错位字组的分类(Group Anagrams)
  6. 最渣的 Spring Boot 文章
  7. SSM + AJAX + JSON 动态下拉框
  8. 关于Android中Animation的停止
  9. 信号量 读者写者问题
  10. Screenshot of a full element in Selenium C#