AngularJs中的$http的集中方法总结(一)

最新推荐文章于 2022-02-20 17:58:19 发布

qq_35383788

最新推荐文章于 2022-02-20 17:58:19 发布

阅读量203

点赞数

文章标签： AngularJS $http

本文链接：https://blog.csdn.net/qq_35383788/article/details/100017274

版权

demo002.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
   <title></title>
   <script src="../bower_components/bower_components/angular/angular.js"></script>
   <script src="../bower_components/jquery/dist/jquery.js"></script>
   <script type="text/javascript">
       let modl = angular.module('myApp',[]);
       var data = {'name':'123','age':'24'};
       modl.controller('ctrl1',function($http){
   //$http的一般写法
       $http({
           //请求的url
url:"http://localhost:8090/First/TryServlet",
//请求的方式
//method:"GET"
method:"POST",
//注意，Angular请求的时候和jquery不一样，Angular的请求较为复杂，有个预先请求(prefile)
//所以要加上一下这句请求头（主要是针对post请求）
headers: {
'Content-type': 'application/x-www-form-urlencoded'
},
//请求的参数,这里为什么使用$.param()方法(引入jquery)，额可以参考https://blog.csdn.net/gaoxr170327/article/details/70156833
data:$.param(data),
//请求的类型
dataType:"json"
//成功后执行的函数
       }).then(function successCallback(resp){
           var text = document.getElementById('aa');
           text.innerHTML = resp.data.name;
console.log(resp.data);
console.log(JSON.stringify(data));
//失败后执行的函数
       },function errorCallback(resp){
console.log(resp);
       });

});

</script>

</head>
<body ng-controller="ctrl1">
<span id="aa"></span>
</body>
</html>

demo003.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
   <title></title>
   <script src="../bower_components/bower_components/angular/angular.js"></script>
   <script type="text/javascript">
       let modl = angular.module('myApp',[]);
       var data = {};
       modl.controller('ctrl1',function($http){
   //$http的一般写法
       $http({
           //请求的url
url:"http://localhost:8090/First/TryServlet",
//请求的方式
method:"GET",
//请求的参数,GEt使用的是params而不是data
params:{'name':1,'age':2},
//请求的类型
dataType:"json"
//成功后执行的函数
       }).then(function successCallback(resp){
           var text = document.getElementById('aa');
           text.innerHTML = resp.data.name;
console.log(resp.data);
//失败后执行的函数
       },function errorCallback(resp){
console.log(resp);
       });

});

</script>

</head>
<body ng-controller="ctrl1">
<span id="aa"></span>
</body>
</html>

demo004.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
   <title></title>
   <script src="../bower_components/bower_components/angular/angular.js"></script>
   <script type="text/javascript">
       let modl = angular.module('myApp',[]);
       var params = {"name":'123',"age":"23"};
       modl.controller('ctrl1',function($http){
   //$http的简化写法，注意，这里的params是要用{}包住的
       $http.get("http://localhost:8090/First/TryServlet",{params})
       .then(function successCallback(resp){
           var text = document.getElementById('aa');
           text.innerHTML = resp.data.name;
console.log(resp.data);
//失败后执行的函数
       },function errorCallback(resp){
console.log(resp);
       });

});

</script>

</head>
<body ng-controller="ctrl1">
<span id="aa"></span>
</body>
</html>

demo005.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
   <title></title>
   <script src="../bower_components/bower_components/angular/angular.js"></script>
       <script src="../bower_components/jquery/dist/jquery.js"></script>
   <script type="text/javascript">
       let modl = angular.module('myApp',[]);
       var params = {"name":'123',"age":"23"};
       var data = $.param(params);
       var headers = {'Content-type': 'application/x-www-form-urlencoded'};
       modl.controller('ctrl1',function($http){
   //$http的简化写法，注意，这里的params是要用{}包住的，而且这里的变量不能随意定义，data只能定义为data，headers只能定义为headers
       $http.post("http://localhost:8090/First/TryServlet",{data},{headers})
       .then(function successCallback(resp){
           var text = document.getElementById('aa');
           text.innerHTML = resp.data.name;
console.log(resp.data);
//失败后执行的函数
       },function errorCallback(resp){
console.log(resp);
       });

});

</script>

</head>
<body ng-controller="ctrl1">
<span id="aa"></span>
</body>
</html>

后台：

package com.day1.cn;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

public class TryServlet extends HttpServlet {
   private String message;
   public static Connection conn = null;
   public static Statement st = null;
   public static ResultSet rs = null;
   List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();

   /**
   * Constructor of the object.
   */
   public TryServlet() {
       super();
   }

   /**
   * Destruction of the servlet. <br>
   */
   public void destroy() {
       super.destroy(); // Just puts "destroy" string in log
       // Put your code here
   }

   /**
   * The doGet method of the servlet. <br>
   *
   * This method is called when a form has its tag value method equals to get.
   *
   * @param request
   * the request send by the client to the server
   * @param response
   * the response send by the server to the client
   * @throws ServletException
   * if an error occurred
   * @throws IOException
   * if an error occurred
   */
   public void doGet(HttpServletRequest request, HttpServletResponse response)
           throws ServletException, IOException {
list.clear();
       // response.addHeader("Access-Control-Allow-Origin",
       // "http://10.1.8.167:1234");
       response.addHeader("Access-Control-Allow-Origin", "*");
       String username = request.getParameter("name");
       String age = request.getParameter("age");
       if(username!=null&&age!=null)
       {
           System.out.println(username+age);
       }

       response.setHeader("Access-Control-Allow-Credentials", "true");
       response.setHeader("Access-Control-Allow-Methods",
               "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
       response.setHeader(
               "Access-Control-Allow-Headers",
               "Origin, X-Requested-With, Content-Type,Token,Accept, Connection, User-Agent, Cookie");
       response.setHeader("Access-Control-Max-Age", "3628800");
       response.setContentType("text/html");
       String driver = "com.mysql.jdbc.Driver";
       String url = "jdbc:mysql://10.1.8.167:3306/scene";
       String user = "scene";
       String pass = "scene";
       try {
           Class.forName(driver);
           conn = DriverManager.getConnection(url, user, pass);
       } catch (ClassNotFoundException e) {
           // TODO Auto-generated catch block
           e.printStackTrace();
       } catch (SQLException e) {
           // TODO Auto-generated catch block
           e.printStackTrace();
       }
       try {
           st = conn.createStatement();
       } catch (SQLException e1) {
           // TODO Auto-generated catch block
           e1.printStackTrace();
       }
       String sql = "select * from admin_user";
       try {
           rs = st.executeQuery(sql);
       } catch (SQLException e1) {
           // TODO Auto-generated catch block
           e1.printStackTrace();
       }
       try {
           if (rs.next()) {
               // 将rs类型转换为list类型

ResultSetMetaData md = rs.getMetaData();

int columnCount = md.getColumnCount();

while (rs.next()) {

Map<String, Object> rowData = new HashMap<String, Object>();

for (int i = 1; i <= columnCount; i++) {

rowData.put(md.getColumnName(i), rs.getObject(i));

}

list.add(rowData);

               }
               System.out.println(list);
           }
       } catch (SQLException e1) {
           // TODO Auto-generated catch block
           e1.printStackTrace();
       }

// String json=JSON.toJSONString(list);
       PrintWriter out = response.getWriter();
       out.print(list);
       try {
           rs.close();
           st.close();
           conn.close();
       } catch (SQLException e) {
           // TODO Auto-generated catch block
           e.printStackTrace();
       }
   }
   public void doPost(HttpServletRequest request, HttpServletResponse response)
           throws ServletException, IOException {
list.clear();
//start这里的一段是因为post提交产生的问题,可以参考：https://blog.csdn.net/gaoxr170327/article/details/70156833
StringBuilder builder = new StringBuilder();

try{
BufferedReader reader = request.getReader();
char[] buff = new char[1024];
int len = 0;
while((len=reader.read(buff))!= -1){
builder.append(buff,0,len);
}
}catch(Exception e){
}
System.out.println(builder.toString());
//end
       response.addHeader("Access-Control-Allow-Origin", "*");
       String username = request.getParameter("name");
       String age = request.getParameter("age");
       if(username!=null&&age!=null)
       {
           System.out.println(username+age);
       }

       response.setHeader("Access-Control-Allow-Credentials", "true");
       response.setHeader("Access-Control-Allow-Methods",
               "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
       response.setHeader(
               "Access-Control-Allow-Headers",
               "Origin, X-Requested-With, Content-Type,Token,Accept, Connection, User-Agent, Cookie");
       response.setHeader("Access-Control-Max-Age", "3628800");
       response.setContentType("application/json");
       String driver = "com.mysql.jdbc.Driver";
       String url = "jdbc:mysql://10.1.8.167:3306/scene";
       String user = "scene";
       String pass = "scene";
       try {
           Class.forName(driver);
           conn = DriverManager.getConnection(url, user, pass);
       } catch (ClassNotFoundException e) {
           // TODO Auto-generated catch block
           e.printStackTrace();
       } catch (SQLException e) {
           // TODO Auto-generated catch block
           e.printStackTrace();
       }
       try {
           st = conn.createStatement();
       } catch (SQLException e1) {
           // TODO Auto-generated catch block
           e1.printStackTrace();
       }
       String sql = "select * from admin_user";
       try {
           rs = st.executeQuery(sql);
       } catch (SQLException e1) {
           // TODO Auto-generated catch block
           e1.printStackTrace();
       }
       try {
           if (rs.next()) {
               // 将rs类型转换为list类型

ResultSetMetaData md = rs.getMetaData();

int columnCount = md.getColumnCount();

while (rs.next()) {

Map<String, Object> rowData = new HashMap<String, Object>();

for (int i = 1; i <= columnCount; i++) {

rowData.put(md.getColumnName(i), rs.getObject(i));

}

list.add(rowData);

               }
               System.out.println(list);
           }
       } catch (SQLException e1) {
           // TODO Auto-generated catch block
           e1.printStackTrace();
       }

//String json= JSONArray.fromObject(list).toString();
       PrintWriter out = response.getWriter();
       //out.print(new JSONObject(list));
//       JSONObject wangxiaoer = new JSONObject();
//       try {
//           wangxiaoer.put("name", "lisi");
//       } catch (JSONException e1) {
//           // TODO Auto-generated catch block
//           e1.printStackTrace();
//       }
       //把list类型转换为数组类型
       JSONArray json = new JSONArray(list);
       out.print(json);

       try {
           rs.close();
           st.close();
           conn.close();
       } catch (SQLException e) {
           // TODO Auto-generated catch block
           e.printStackTrace();
       }
   }

   /**
   * Initialization of the servlet. <br>
   *
   * @throws ServletException
   * if an error occurs
   */
   public void init() throws ServletException {
       // Put your code here
       message = "Hello World";
   }

}

qq_35383788

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs中的$http的集中方法总结(一)

demo002.html<!DOCTYPE html><html ng-app="myApp"><head> <title></title> <script src="../bower_components/bower_components/angular/angular.js"></script...
复制链接

扫一扫