jQuery 없이 $http로 urlencoded 폼 데이터를 POST하려면 어떻게 해야 합니까?
Angular JS는 처음이라 처음에는 Angular만을 사용하여 새로운 어플리케이션을 개발하려고 했습니다.JS.
서버 측에 AJAX 콜을 발신하려고 합니다.$httpAngular 앱에서 확인하세요.
파라메타를 송신하기 위해서, 다음을 시도했습니다.
$http({
method: "post",
url: URL,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: $.param({username: $scope.userName, password: $scope.password})
}).success(function(result){
console.log(result);
});
이것은 동작하고 있습니다만, jQuery도 사용하고 있습니다.$.paramjQuery에 대한 의존성을 제거하기 위해 다음과 같이 시도했습니다.
data: {username: $scope.userName, password: $scope.password}
실패하는 것 같았어요.그리고 나는 시도했다.params:
params: {username: $scope.userName, password: $scope.password}
이것도 실패하는 것 같았어요.그리고 나는 시도했다.JSON.stringify:
data: JSON.stringify({username: $scope.userName, password: $scope.password})
나는 내 탐구에 대한 가능한 답을 찾았지만 성공하지 못했다.내가 뭘 잘못하고 있나요?확실해, 앵글JS는 이 기능을 제공하지만 어떻게 제공합니까?
오브젝트에서 JSON 문자열이 아닌 URL 파라미터로 데이터를 변환해야 한다고 생각합니다.
기본적으로 $http 서비스는 데이터를 JSON으로 직렬화한 다음 "application/json"이라는 컨텐츠 유형을 사용하여 게시함으로써 발신 요청을 변환합니다.이 값을 FORM 포스트로 게시하려면 시리얼라이제이션 알고리즘을 변경하여 "application/x-www-form-urlencoded"라는 콘텐츠 유형을 사용하여 데이터를 게시해야 합니다.
여기서부터의 예.
$http({
method: 'POST',
url: url,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
transformRequest: function(obj) {
var str = [];
for(var p in obj)
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
return str.join("&");
},
data: {username: $scope.userName, password: $scope.password}
}).then(function () {});
갱신하다
Angular가 추가된 새 서비스를 사용하려면JS V1.4, 참조
Angular만을 사용한 URL 부호화 변수JS 서비스
AngularJS 1.4 이후에서는 2개의 서비스가 POST 요청용 url 부호화 프로세스를 처리할 수 있기 때문에 데이터를 조작할 필요가 없어집니다.transformRequest또는 jQuery와 같은 외부 종속성을 사용합니다.
$httpParamSerializerJQLike- jQuery에서 영감을 받은 시리얼라이저(권장)$httpParamSerializer- GET 요청 시 Angular 자체에서 사용하는 시리얼라이저
$http()의 예
$http({
url: 'some/api/endpoint',
method: 'POST',
data: $httpParamSerializerJQLike($scope.appForm.data), // Make sure to inject the service you choose to the controller
headers: {
'Content-Type': 'application/x-www-form-urlencoded' // Note the appropriate header
}
}).then(function(response) { /* do something here */ });
자세한 Plunker 데모를 참조하십시오.
$http.post()의 예
$http.post(
'some/api/endpoint',
data: $httpParamSerializerJQLike($scope.appForm.data), // Make sure to inject the service you choose to the controller
{
headers: {
'Content-Type': 'application/x-www-form-urlencoded' // Note the appropriate header
}
}
).then(function
잘 지내시나요?$httpParamSerializerJQLike그리고.$httpParamSerializer다른
대체로 그런 것 같다$httpParamSerializerurl-interal 형식을 사용하는 경우보다 적게 사용됩니다.$httpParamSerializerJQLike복잡한 데이터 구조의 경우.
예를 들어 (괄호 부호화 비율 무시):
• 어레이의 부호화
{sites:['google', 'Facebook']} // Object with array property
sites[]=google&sites[]=facebook // Result with $httpParamSerializerJQLike
sites=google&sites=facebook // Result with $httpParamSerializer
• 오브젝트 부호화
{address: {city: 'LA', country: 'USA'}} // Object with object property
address[city]=LA&address[country]=USA // Result with $httpParamSerializerJQLike
address={"city": "LA", country: "USA"} // Result with $httpParamSerializer
이 모든 것이 과잉 살상(또는 효과가 없음)으로 보입니다.다음 작업을 수행합니다.
$http.post(loginUrl, `username=${ encodeURIComponent(username) }` +
`&password=${ encodeURIComponent(password) }` +
'&grant_type=password'
).success(function (data) {
문제는 JSON 문자열 형식입니다.데이터에 간단한 URL 문자열을 사용할 수 있습니다.
$http({
method: 'POST',
url: url,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: 'username='+$scope.userName+'&password='+$scope.password
}).success(function () {});
이 방법은 다음과 같습니다(백엔드는 변경하지 말아주세요...)전면 스택이 지원되지 않는 경우application/x-www-form-urlencoded★★★★★★★★★★… Angular는 가 할수 있다!JS 아깝다!
$http({
method: 'POST',
url: 'api_endpoint',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: 'username='+$scope.username+'&password='+$scope.password
}).then(function(response) {
// on success
}, function(response) {
// on error
});
AngularJS 1.5에서는 매력적으로 동작합니다.
여러분, 조언을 좀 드리겠습니다.
을
.then(success, error)with를 할 때$http, 잊다.sucess★★★★★★★★★★★★★★★★★」.error)angularjs 사이트에서 "콜백 파라미터 값의 행선지를 지정하기 위한 플레이스 홀더로서 JSON_CALLBACK 문자열을 사용할 수 없습니다."
데이터 모델이 사용자 이름 및 비밀번호보다 더 복잡한 경우에도 가능합니다(위에서 제시한 바와 같이).
$http({
method: 'POST',
url: 'api_endpoint',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: json_formatted_data,
transformRequest: function(data, headers) {
return transform_json_to_urlcoded(data); // iterate over fields and chain key=value separated with &, using encodeURIComponent javascript function
}
}).then(function(response) {
// on succes
}, function(response) {
// on error
});
『 』에 encodeURIComponent여기서 찾을 수 있다
폼의 경우는, 헤더를 다음과 같이 변경해 주세요.
headers[ "Content-type" ] = "application/x-www-form-urlencoded; charset=utf-8";
형식과 단순한 json이 아닌 경우 다음 헤더를 사용해 보십시오.
headers[ "Content-type" ] = "application/json";
$http 문서에서는 이것이 유효합니다.
$http.post(url, data,{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
.success(function(response) {
// your code...
});
$http({
method: "POST",
url: "/server.php",
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
data: "name='Олег'&age='28'",
}).success(function(data, status) {
console.log(data);
console.log(status);
});
플레인 Javascript 오브젝트를 투고해야 합니다.다른 건 없어요
var request = $http({
method: "post",
url: "process.cfm",
transformRequest: transformRequestAsFormPost,
data: { id: 4, name: "Kim" }
});
request.success(
function( data ) {
$scope.localData = data;
}
);
백엔드로 php를 사용하고 있다면 수정을 좀 더 해야 할 것 같습니다.이 링크를 체크하여 php 서버 측을 수정합니다.
답변이 늦었지만 angular Url Search Params는 나에게 매우 잘 작동한다는 것을 알게 되었습니다.파라미터의 부호화도 처리됩니다.
let params = new URLSearchParams();
params.set("abc", "def");
let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded'});
let options = new RequestOptions({ headers: headers, withCredentials: true });
this.http
.post(UrlUtil.getOptionSubmitUrl(parentSubcatId), params, options)
.catch();
이건 나한테 효과가 있었어.프런트엔드는 angular, 백엔드는 larabel php를 사용합니다.내 프로젝트에서는 앵귤러 웹이 json 데이터를 larabel back-end로 전송합니다.
이건 제 각도 조절기입니다.
var angularJsApp= angular.module('angularJsApp',[]);
angularJsApp.controller('MainCtrl', function ($scope ,$http) {
$scope.userName ="Victoria";
$scope.password ="password"
$http({
method :'POST',
url:'http://api.mywebsite.com.localhost/httpTest?callback=JSON_CALLBACK',
data: { username : $scope.userName , password: $scope.password},
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log('status',status);
console.log('data',status);
console.log('headers',status);
});
});
이것은 제 php 백엔드 라라벨 컨트롤러입니다.
public function httpTest(){
if (Input::has('username')) {
$user =Input::all();
return Response::json($user)->setCallback(Input::get('callback'));
}
}
이것은 나의 라라벨 라우팅이다.
Route::post('httpTest','HttpTestController@httpTest');
브라우저의 결과는 다음과 같습니다.
200 ~ 200
데이터 JSON_CALLBACK ({"사용자명") :"빅토리아", "비밀번호", "비밀번호", "콜백":함수 ( cJSON_CALLBACK"}; httpTesting.js:18 |(c)|(cb;c)
집배원이라고 불리는 크롬 확장판이 있습니다.를 사용하여 백엔드 URL의 동작 여부를 테스트할 수 있습니다.https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm?hl=en
제 답변이 도움이 되길 바랍니다.
언급URL : https://stackoverflow.com/questions/24710503/how-do-i-post-urlencoded-form-data-with-http-without-jquery
'IT' 카테고리의 다른 글
| TS2322를 수정하는 방법: "다른 유형의 구속조건 'object'로 인스턴스화할 수 있습니다." (0) | 2023.02.22 |
|---|---|
| 워드프레스를 사용해서 입력을 삭제하는 가장 좋은 방법을 알려주시겠어요? (0) | 2023.02.22 |
| Angular 2 변경 감지는 어떻게 작동합니까? (0) | 2023.02.22 |
| react-testing-library - 화면과 렌더 쿼리 (0) | 2023.02.22 |
| Redux와 릴레이의 차이점 (0) | 2023.02.22 |