Angular+servlet java实现前后端数据交互
时间:2022-05-03
本文章向大家介绍Angular+servlet java实现前后端数据交互,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
每学习一个新知识我都会想到的是用它来实现对数据的CRUD,Angularjs也不例外,而实现CRUD的前提就是前后端数据能够进行交互,下面我就展示一个简易的前后端交互代码
Html+js代码:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>servlet+angularjs数据交互</title>
<script src="framework/angular-1.3.0.14/angular.js"></script>
<script src="framework/jquery-1.9.1.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="demo">
<input type="button" value="提交" ng-click="submit()"/>
</div>
<script>
var app=angular.module("myApp", [])
app.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.headers.post["Content-Type"] =
"application/x-www-form-urlencoded";
$httpProvider.defaults.
transformRequest.unshift(function(data,headersGetter) {
var key, result = [];
for (key in data) {
if (data.hasOwnProperty(key)) {
result.push(encodeURIComponent(key) + "="
+ encodeURIComponent(data[key]));
}
}
return result.join("&");
});
}]);
app.controller("demo", function($scope,$http) {
$scope.submit = function () {
var url = "demo";
var data = {"name": "你好"};
$http.post(url, data).success(function (data){
console.log(data);
});
};
});
</script>
</body>
</html>
Java代码:
package com.whpu;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Demo extends HttpServlet{
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String name = req.getParameter("name");
System.out.println(name);
PrintWriter pw = resp.getWriter();
String jsonStr="{"value":"hello"}";
pw.println(jsonStr);
}
}
Web.xml代码:
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>AngularJs</display-name>
<servlet>
<servlet-name>demo</servlet-name>
<servlet-class>com.whpu.Demo</servlet-class>
</servlet>
</web-app>
<servlet-mapping>
<servlet-name>demo</servlet-name>
<url-pattern>/demo</url-pattern>
</servlet-mapping>
$http.post(url, data)data是一个json对象的参数,在后台通过request即可获取,然后你就可以进行相关处理,而后台传数据到前台
PrintWriterpw = resp.getWriter();
StringjsonStr="{"value":"hello"}";
pw.println(jsonStr);
通过这三行代码将{"value":"hello"}这个字符串形式的json放入流中在前台通过回调的
$http.post(url,data).success(function (data){
console.log(data);
});
即可访问data及上面{"value":"hello"}这个字符串,并且angularjs会自动解析成json对象
至于上面的$httpProvider配置则是设置了一些头部属性,以便正确获取参数并防止乱码。启动服务器后,后台java获取的值是你好而前台获得的是一个json对象
至此前后台交互已经完成.
备注:1、servlet和Angularjs相关的包注意引入
2、小白写博客,不喜勿喷
3、有什么更好的建议希望提出来
- 如何在CM中启用YARN的使用率报告
- 如何修改CDSW服务的DNS和HOSTNAME
- 想尝试搭建图像识别系统?这里有一份TensorFlow速成教程
- 如何查看集成Sentry后Hive作业的真实用户
- 如何在Impala中实现拉链表
- 多图见证模拟机器人的逆天成长:论进化策略在强化学习中的应用
- Hue禁止用户下载数据问题分析
- 如何在RedHat6上使用Bind搭建DNS服务
- 如何使用Cloudera Manager升级Spark2.1版本至Spark2.2
- Cloudera Manager分发Parcel异常分析
- 如何在Hue中配置Impala的负载均衡
- 35行代码实现千万级别字典的快速去重
- PIMS三个漏洞+里程密最新版V2.3 SQL注入漏洞
- 如何在Redhat7.3安装CDH5.14
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- R-plotly|甘特图(Gantt chart)- 一不小心年中了,立个flag
- XXE漏洞那些事儿(JAVA)
- Hexo 建站过程
- Tidyverse|tidyr数据重塑之gather,spread(长数据宽数据转化)
- fastjson中的jndi注入
- R|生存分析-结果整理
- 实验吧-因缺思汀的绕过
- MySQL 用户与授权管理详解
- 基本知识|R语言简单饼图的绘制
- 分享一个有趣且牛逼的漏洞
- ggplot2-annotation|画图点“精”,让图自己“解释”
- 使用curl工具调试https接口
- 让android支持https访问银联后台,测试成功
- java版银联8583协议解析,超简单超直观的实现及示例(全互联网最简单)
- Kafka 重要知识点