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 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 Javascript
vue实现移动端拖动排序
Aug 21 Javascript
OpenLayers实现图层切换控件
Sep 25 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
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
学习YUI.Ext 第二天
2007/03/10 Javascript
JavaScript中的闭包原理分析
2010/03/08 Javascript
js 分页全选或反选标识实现代码
2011/08/09 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
详解JavaScript权威指南之对象
2016/09/27 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
新手简单了解vue
2019/05/29 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
python的socket编程入门
2018/01/29 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
python实现贪吃蛇游戏
2020/03/21 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
美国轮胎网站:Priority Tire
2018/11/28 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
史学专业毕业生求职信
2014/05/09 职场文书
活动倡议书范文
2014/05/13 职场文书
新闻学专业求职信
2014/07/28 职场文书
尊老爱亲美德少年事迹材料
2014/08/14 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
大学教师个人总结
2015/02/10 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
机关单位2016年法制宣传日活动总结
2016/04/01 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
python3中apply函数和lambda函数的使用详解
2022/02/28 Python
VUE递归树形实现多级列表
2022/07/15 Vue.js