若是咱們像往常同樣使用jq中的$.ajax方法,那代碼應該是:html
$.ajax({java
method:'post',jquery
url:'url.jsp',ajax
data:{服務器
name:$('#id').val()app
}jsp
})ide
.success(function(){post
//......url
})
再來看一下$http,若是按照上面的格式,是行不通的。咱們須要一些改變,將傳遞給後臺的data改成字符串拼接的形式,而且對頭部的屬性進行一些改變。
HTML代碼:
<div ng-controller="ajaxController"> <input type=text ng-model="name"/> <input type=text ng-model="age"/> <button ng-click="ajax()">ajax</button> //***展現服務器端傳回來的數據**// <h2>ajax:{{ajaxData}}</h2> </div
JS代碼:
angular.module("myApp",[]) .config(function($httpProvider) { $httpProvider.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=utf-8'; //改變header中content-type的格式 }) .controller("ajaxController",function($scope,$http){ $scope.ajax=function(){ $scope.postData="name="+$scope.name+"&age="+$scope.age; //注意拼接形式 $http({ url:'getData.jsp', method:'post', data:$scope.postData }) .success(function(res){ $scope.ajaxData=res; }) .error(function(err){ //...... }) } })
服務器端:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String name=new String(); String age=new String(); name=request.getParameter("name"); age=request.getParameter("age"); out.println("name:"+name+"&age:"+age); %>
運行結果以下:
是否是感受跟jquery的$ajax同樣的使用了?