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、有什么更好的建议希望提出来

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏别先生

Ckeditor一种很方便的文本编辑器

ckeditor官网: http://ckeditor.com/ 这里介绍ckeditor的其中一个的用法,自己做小项目练手非常的适合,上手非常的快。 首先去官...

2956
来自专栏技术小黑屋

啰嗦一下android中的NetworkOnMainThreadException

相信很多Android开发者很多都遇到过android.os.NetworkOnMainThreadException 这个异常,意思就是主线程进行网络操作异常...

4422
来自专栏java学习

一个简单的Ajax功能(用到Jquery与Json)

功能介绍:就是页面已加载完成就通过ajax异步访问服务器然后去局部刷新页面(也就是给从服务器获取的值存在页面的下拉框中显示如下图:) 效果图: ? 提...

3246
来自专栏yukong的小专栏

【ssm个人博客项目实战05】easy ui datagrid实现数据的分页显示1、数据格式准备工作2、业务层实现3、控制层实现4、前端视图处理

前面一节 我们已经实现博客类别的dao层的实现,其中特别讲解了博客类别的分页的实现,那么现在我们实现了后台的分页,那么前台分页怎么显示呢,这时候我们用到了eas...

2682
来自专栏Hongten

JSP 一讲

2962
来自专栏学海无涯

Java Web之Servlet获取表单值

Java Web开发中,最常用的就是在后台获取前台的参数,经典的案例就是 JSP 表单传值到后台的 Servlet,然后在 doGet 或者 doPost 中获...

3634
来自专栏Golang语言社区

【Go 语言社区】跨域问题解决方案:jsonP客户端和服务器代码

客户端代码: <html> <head> <script type='text/javascript'> function mycallback(reco...

3434
来自专栏androidBlog

Android 二次封装网络加载框架

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/de...

1721
来自专栏微信公众号:Java团长

Java Web学习总结(七)——HttpServletResponse对象(一)

Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象、和代表响应的response对象。request和resp...

1082
来自专栏黑泽君的专栏

day52_BOS项目_04

第一步:导入pinyin4j-2.5.0.jar包,拷贝PinYin4jUtils.java工具类至utils包中 第二步:测试类代码如下:

992

扫码关注云+社区

领取腾讯云代金券