Angular.JS内置服务$http对数据库的增删改使用教程


Posted in Javascript onMay 07, 2017

本文主要介绍的是Angular.JS内置服务$http对数据库的增删改操作的相关内容,分享出来供大家参考学习,下面来看看详细的介绍:

一、使用$http查询MySQL数据

angular.module('app',[])
.controller('MyCtrl',function ($scope,$http) {
 $http.get('http://127.0.0.1:80/user/getUsers')
 .success(function (resp) {
  console.log(resp);
 })
 .error()
 //jQuery
 /*$.get('url',function (data) {
  
 });*/
})

对应的后台Java代码:

public void getUsers(){
  List<User> users = User.dao.find("select * from t_user");
renderJson(Users);
}

二、$http实现对数据的增删改

     (1)$http带参数发送请求

     (2)对MySQL数据增删改

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>AngularJS $http</title>

 <link rel="stylesheet" href="css/foundation.min.css" rel="external nofollow" >
 <style type="text/css">
  html,body{font-size:14px;}
 </style>
</head>
<body style="padding:10px;" ng-app="app">
 <div ng-controller="MyCtrl">
  <input type="text" ng-model="id">
  <input type="text" ng-model="name">
  <button class="button" onclick="addUser()">添加</button>
  <button class="button" onclick="delUser()">删除</button>
 </div>
</body>
<script src="js/angular.min.js"></script>
<script src="app.js"></script>
</html>
angular.module('app', [])
 .controller('MyCtrl', function ($scope, $http) {
  $scope.id=" ";
  $scope.name=" ";
  $scope.addUser = function () {
   $http.post('http://127.0.0.1:80/user/addUser',{id:$scope.id, name:$scope.name})
    .success(function (resp) {
     if(resp.success){
      alert("添加成功");
     }
    })
  }
  $scope.delUser = function () {
   $htp.post('http://127.0.0.1:80/user/delUser',{id:$scope.id})
   .success(function () {
    if(resp.success){
     alert('删除成功');
    }
   })
  }
 })

后台Java代码:

public void addUser(){
  String id = getPara("id");
  String name = getPara("name");
  User user = new User();
  boolean isok = false;
  if(id != null && id.equals("")){
   isok = user.set("id",id).set("name",name).update();
  }else{
   isok = user.set("name",name).save();
  }
  renderJson("seccess",isok);
}

public void delUser(){
  String id = getPara("id");
  boolean isok = User.dao.deleById(id);
  renderJson("seccess",isok);
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用Angular.js能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
Jquery动态添加及删除页面节点元素示例代码
Jun 16 Javascript
js使用循环清空某个div中的input标签值
Sep 29 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
遍历json获得数据的几种方法小结
Jan 21 Javascript
jquery.pager.js分页实现详解
Jul 29 jQuery
vue-cli 为项目设置别名的方法
Oct 15 Javascript
基于Vue中的父子传值问题解决
Jul 27 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 #Javascript
Angular2中select用法之设置默认值与事件详解
May 07 #Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 #Javascript
Angular.Js中ng-include指令的使用与实现
May 07 #Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 #Javascript
JavaScript的继承实现小结
May 07 #Javascript
vue2.0多条件搜索组件使用详解
Mar 26 #Javascript
You might like
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
关于crontab的使用详解
2013/06/24 PHP
php实现httpclient类示例
2014/04/08 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
用JS操作FRAME中的IFRAME及其内容的实现代码
2008/07/26 Javascript
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
js下拉菜单语言选项简单实现
2013/09/23 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
vue的token刷新处理的方法
2018/07/17 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
实践Vim配置python开发环境
2018/07/02 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
python内存动态分配过程详解
2019/07/15 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
违反工作规定检讨书范文
2014/12/14 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
主持稿开场白
2015/06/01 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers