Angular+servlet java实现前后端数据交互

      每学习一个新知识我都会想到的是用它来实现对数据的CRUD,Angularjs也不例外,而实现CRUD的前提就是前后端数据能够进行交互,下面我就展示一个简易的前后端交互代码

Html+js代码:





servlet+angularjs数据交互
 
  



    

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代码:



    AngularJs
    
        demo
        com.whpu.Demo
    

    
        demo
        /demo
    

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




你可能感兴趣的:(Angularjs)