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 相关文章推荐
Ext对基本类型的扩展 ext,extjs,format
Dec 25 Javascript
JavaScript获取浏览器信息的方法
Nov 20 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
Javascript中的arguments对象
Jun 20 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
vue实现的封装全局filter并统一管理操作示例
Feb 02 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 Javascript
修改NPM全局模式的默认安装路径的方法
Dec 15 Javascript
javascript实现下拉菜单效果
Feb 09 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
ADODB类使用
2006/11/25 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
javascript是怎么继承的介绍
2012/01/05 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
JavaScript数据结构与算法之链表
2016/01/29 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
代码详解JS操作剪贴板
2018/02/11 Javascript
nodejs提示:cross-device link not permitted, rename错误的解决方法
2019/06/10 NodeJs
Vue中util的工具函数实例详解
2019/07/08 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
10个Python面试常问的问题(小结)
2019/11/20 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
小学教师的个人自我鉴定
2013/10/24 职场文书
高等教育学自荐书范文
2014/02/10 职场文书
研修第一天随笔感言
2014/02/15 职场文书
聚美优品励志广告词
2014/03/14 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
2014年政工师工作总结
2014/12/18 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
nginx日志格式分析和修改
2022/04/28 Servers
mysql幻读详解实例以及解决办法
2022/06/16 MySQL