আমি কীভাবে jQuery ছাড়াই le http সহ urlncoded ফর্ম ডেটা পোস্ট করব?

Question

আমি অ্যাঙ্গুলারজেএস-এ নতুন, এবং শুরু করার জন্য, আমি কেবল অ্যাঙ্গুলারজেএস ব্যবহার করে একটি নতুন অ্যাপ্লিকেশন বিকাশ করার চিন্তাভাবনা করেছি।

আমি $httpআমার কৌণিক অ্যাপ্লিকেশনটি ব্যবহার করে সার্ভার সাইডে একটি এজেএক্স কল করার চেষ্টা করছি trying

পরামিতিগুলি প্রেরণের জন্য, আমি নিম্নলিখিতটি চেষ্টা করেছি:

$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 ব্যবহার করছে $.param। JQuery এর উপর নির্ভরতা অপসারণ করার জন্য, আমি চেষ্টা করেছি:

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})

আমি আমার সন্ধানের এই সম্ভাব্য উত্তরগুলি খুঁজে পেয়েছি, তবে ব্যর্থ হয়েছিল। আমি কি ভুল কিছু করছি? আমি নিশ্চিত, AngularJS এই কার্যকারিতাটি সরবরাহ করবে তবে কীভাবে?

Comments

প্রকৃত সমস্যাটি কী তা আমি জানি না তবে আপনি কি চেষ্টা করেছিলেন$http({method: 'post', url: URL, data: {username: $scope.userName, password: $scope.password}});

— মৃতুঞ্জয়

আপনার প্রথম পদ্ধতিটি কাজ করা উচিত, $scope.userNameসংজ্ঞায়িত হয়? আপনি চেষ্টা করেননি কেন data: data?

— কেভিন বি

@ কেভিনব: দুঃখিত .. আমি সঠিক সম্পাদনা করেছি।

— বীর শ্রীবাস্তব

@ মৃতুঞ্জয়: দুঃখিত .. আমি সম্পাদনা করেছি .. আমিও চেষ্টা করছিলাম।

— বীর শ্রীবাস্তব

@ ভিয়ার এটি কাজ করেছে বা এখনও আপনার কোন সমস্যা আছে?

— ভি 31

Answer 1

আমি মনে করি আপনাকে যা করা দরকার তা হল আপনার ডেটাটিকে জেএসওএন স্ট্রিংকে না করে বস্তু থেকে রূপান্তর করা, তবে ইউআরএল প্যারামগুলি।

বেন নাদেল এর ব্লগ থেকে ।

ডিফল্টরূপে, $ HTTP পরিষেবাটি তথ্যটিকে JSON হিসাবে সিরিয়ালাইজ করে এবং তারপরে "অ্যাপ্লিকেশন / জেসন" বিষয়বস্তুতে পোস্ট করে বহির্গামী অনুরোধটিকে রূপান্তরিত করবে। যখন আমরা ফরম পোস্ট হিসাবে মানটি পোস্ট করতে চাই, আমাদের সিরিয়ালাইজেশন অ্যালগরিদম পরিবর্তন করতে হবে এবং "অ্যাপ্লিকেশন / এক্স-www-ফর্ম-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 () {});

হালনাগাদ

AngularJS V1.4 এর সাথে যুক্ত নতুন পরিষেবাগুলি ব্যবহার করতে, দেখুন

• URL- এনকোডিং ভেরিয়েবলগুলি কেবলমাত্র AngularJS পরিষেবা ব্যবহার করে

Comments

JQuery ব্যবহার না করার জন্য আপনাকে ধন্যবাদ!

— ওভারমার্স

আমার যদি মাল্টিপার্ট / ফর্ম-ডেটা জমা দেওয়ার দরকার হয়?

— দেজেল

যতক্ষণ পর্যন্ত কৌণিকটি jqLite এর অধীনে এম্বেড করে angular.element, আপনি সহজেই করতে পারেনreturn angular.element.param(obj);

— ভিসারি

@ ভিকারি মনে রাখবেন যে পরম () jqLite - কোড.

— অ্যালেক্স পাভলভ

এটি যাওয়ার আরও একটি উপায় var obj = {a: 1, b: 2}; Object.keys(obj).reduce(function(p, c) { return p.concat([encodeURIComponent(c) + "=" + encodeURIComponent(obj[c])]); }, []).join('&');

— 30

Answer 2

URL- এনকোডিং ভেরিয়েবলগুলি কেবলমাত্র AngularJS পরিষেবা ব্যবহার করে

অ্যাঙ্গুলারজেএস ১.৪ এবং তার বেশি, দুটি পরিষেবা পিওএসটি অনুরোধগুলির জন্য ইউআরএল-এনকোডিং ডেটা প্রক্রিয়া পরিচালনা করতে পারে, transformRequestjQuery এর মতো বাহ্যিক নির্ভরতা ব্যবহার করে বা ডেটা ম্যানিপুলেট করার প্রয়োজনীয়তা দূর করে :

1. $httpParamSerializerJQLike- jQuery এর দ্বারা অনুপ্রাণিত একটি সিরিয়ালাইজার .param()( প্রস্তাবিত )

2. $httpParamSerializer - জিইটি অনুরোধের জন্য অ্যাঙ্গুলার নিজেই ব্যবহৃত সিরিয়ালাইজার

ব্যবহারের উদাহরণ

$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 */ });

আরও ভার্জিক প্লানকার ডেমো দেখুন

---

কীভাবে $httpParamSerializerJQLikeএবং $httpParamSerializerআলাদা

সাধারণভাবে মনে হয় জটিল ডাটা স্ট্রাকচারের $httpParamSerializerতুলনায় $httpParamSerializerJQLikeএটি "প্রথাগত" url-encoding ফর্ম্যাটটি কম ব্যবহার করে format

উদাহরণস্বরূপ (বন্ধনীগুলির শতাংশ এনকোডিং উপেক্ষা করে):

• একটি অ্যারের এনকোডিং

{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

Comments

আমরা কীভাবে এটি কোনও কারখানার অভ্যন্তরীণ সংস্থানতে ব্যবহার করতে পারি?

— স্থিরজীবন

এর $http.({...পরিবর্তে হওয়া উচিত$http.post({...

— কার্লোস গ্রানাডোস

@ কার্লোস গ্রানাডোস লক্ষ্য করার জন্য ধন্যবাদ। এখানে এবং প্লঙ্কার ডেমোতে এই টাইপগুলি সংশোধন করেছেন।

— বোয়াজ

এটি jQuery থেকে

— অ্যাঙ্গুলারজেএস-এ

এটি আমি খুঁজছিলাম AngularJS- নির্দিষ্ট উত্তর। আমি আশা করি পোস্টারটি সেরা উত্তর হিসাবে এটি নির্বাচন করবে।

— মার্টি চ্যাং

Answer 3

এগুলির সমস্ত দেখতে ওভারকিলের মতো (বা কাজ করে না) ... কেবল এটি করুন:

$http.post(loginUrl, `username=${ encodeURIComponent(username) }` +
                     `&password=${ encodeURIComponent(password) }` +
                     '&grant_type=password'
).success(function (data) {

Comments

অবশেষে কিছু সাধারণ জ্ঞান

— jlewkovich

এটি কি ভুল সামগ্রী-টাইপ শিরোলেখ দিয়ে অনুরোধটি প্রেরণ করবে না?

— ফিল

এটি আমার জন্য কাজ করেছে ... শিরোনামটি কী তা নিশ্চিত তা নয়, তবে অনুরোধটি কাজ করেছিল এবং এটি সফলভাবে প্রমাণীকরণের অনুমতি দিয়েছে। আপনি এটি কেন পরীক্ষা করে দেখুন না এবং আমাদের জানান।

— সার্জ সাগান

@ ফিল আমার ধারণা, এটি সার্ভারের উপর নির্ভর করে, আমি খারাপ অনুরোধ পেয়েছি, যতক্ষণ না আমি যোগ করেছি until শিরোনাম: Content 'সামগ্রী-প্রকার': 'অ্যাপ্লিকেশন / x-www-form-urlencoded'} the কনফিগার আর্গ হিসাবে, বা সরবরাহের ব্যবহার ices http (কনফিগারেশন) নির্মাতা যেমন moices এর উত্তর শো। যে কোনও উপায়ে এটি গ্রহণযোগ্য উত্তরের চেয়ে উচ্চতর কারণ এটি কিছু যাদু রূপান্তর প্রবর্তন করে না এবং কিছু সহায়ক পরিষেবার ব্যবহারকারীর প্রয়োজন হয় না। ধন্যবাদ!

— মিঃ বাংলো

Answer 4

সমস্যাটি হল JSON স্ট্রিং ফর্ম্যাট, আপনি ডেটাতে একটি সাধারণ URL স্ট্রিং ব্যবহার করতে পারেন:

$http({
    method: 'POST',
    url: url,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: 'username='+$scope.userName+'&password='+$scope.password
}).success(function () {});

Comments

আপনাকে encodeURIComponent($scope.userName)ইউআরএল "&myCustomParam=1"

— কোডটি

এটিই আমার পক্ষে কাজ করেছে! আমি সাফল্য এড়িয়ে গেছি, তবে $ HTTP ফর্ম্যাটটি ভাল

— xenteros

Answer 5

এটি এমনভাবে হওয়া উচিত (এবং দয়া করে কোনও ব্যাকএন্ডের পরিবর্তন হয় না ... অবশ্যই না ... আপনার সামনের স্ট্যাক যদি সমর্থন না করে application/x-www-form-urlencodedতবে তা ফেলে দিন ... আশা করি অ্যাঙ্গুলারজেএস হয়!

$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
 });

অ্যাঙ্গুলারজেএস 1.5 এর সাথে একটি কবিতার মতো কাজ করে

লোকেরা, আপনাকে কিছু পরামর্শ দিন:

• প্রতিশ্রুতি ব্যবহার .then(success, error)যখন সঙ্গে তার আচরণ $http, কথা ভুলে .sucessএবং .errorcallbacks (যেমন তারা অবচিত হচ্ছে)

• এখানে কৌণিক সাইটগুলি থেকে " কলব্যাকের প্যারামিটার মানটি কোথায় যেতে হবে তা নির্দিষ্ট করে দেওয়ার জন্য আপনি আর 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 পাওয়া যাবে

Answer 6

যদি এটি কোনও ফর্ম হয় তবে শিরোনামটি এতে পরিবর্তন করে দেখুন:

headers[ "Content-type" ] = "application/x-www-form-urlencoded; charset=utf-8";

এবং যদি এটি কোনও ফর্ম এবং সাধারণ জসন না হয় তবে এই শিরোনামটি ব্যবহার করে দেখুন:

headers[ "Content-type" ] = "application/json";

Comments

কিছু পাচ্ছে না। আমি এখনও ফাঁকা $_POSTঅ্যারে পেয়েছি !

— বীর শ্রীবাস্তব

এটি কি আপনার নিয়ামকটিতে $ http কল?

— ভি 31

আরও একটি জিনিস আপনার সার্ভার শেষ পিএইচপি?

— V31

আমি এর সমাধান পেয়েছি তারপরেও কি আপনি এখনও @ সমস্যাটি পেয়ে যাচ্ছেন?

— ভি 31

Answer 7

$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);
});

Comments

কোডের উত্তরগুলি সম্প্রদায়ের জন্য কার্যকর নয়। দয়া করে কীভাবে উত্তর করবেন দেখুন

— abpatil

Answer 8

$ Http ডক্স থেকে এটি কাজ করা উচিত ..

  $http.post(url, data,{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
    .success(function(response) {
         // your code...
     });

Comments

@ কেভিন আমি এই সম্পর্কে নিশ্চিত নই তবে আমি যখন কোনও স্ট্রিং প্রেরণের চেষ্টা করেছি তখন এটি আমাকে ত্রুটি দেখিয়েছিল

— শ্রীননাথ

@KevinB Fine..I it..i মনে হেডার যখন একটি স্ট্রিং পাঠানোর পরিবর্তন করা প্রয়োজন হয় পেয়েছিলাম .. stackoverflow.com/a/20276775/2466168

— শ্রীনাথ

মনে রাখবেন যে সঠিক প্রেরণটি headersপ্রভাব ফেলবে না dataযা এখনও একরকম বা অন্যভাবে ইউলিংকড করা দরকার।

— বোয়াজ

ডেটা এখনও জসনে প্রেরণ করা হয়েছে আপনাকে x-www-form-

— urlencod

Answer 9

আপনার সরল জাভাস্ক্রিপ্ট অবজেক্ট পোস্ট করা দরকার, অন্য কিছুই নয়

           var request = $http({
                method: "post",
                url: "process.cfm",
                transformRequest: transformRequestAsFormPost,
                data: { id: 4, name: "Kim" }
            });

            request.success(
                function( data ) {
                    $scope.localData = data;
                }
            );

যদি আপনার পিএইচপি ব্যাক-এন্ড হিসাবে থাকে তবে আপনাকে আরও কিছু পরিবর্তন করতে হবে .. পিএইচপি সার্ভারের পার্শ্ব ঠিক করার জন্য এই লিঙ্কটি চেকআউট করুন

Comments

তিনি যা চেয়েছিলেন ঠিক তা-ও নয়, তিনি বিশেষভাবে জিজ্ঞাসা করেছিলেন কীভাবে তিনি সেগুলি এক্স-www-ফর্ম-ইউরেনকোড হিসাবে পেতে পারেন, কারণ তিনি পোস্ট করেছেন জেসন স্টাফ নিয়ে সমস্যা নিয়ে।

— পেপারম্যান

@ পিটারম্যান আপনি নীচে ভোট দেওয়ার আগে প্রশ্নের সম্পাদনার ইতিহাস পরীক্ষা করে দেখেছেন ..

— হরিশর

Answer 10

যদিও দেরি করে উত্তর পেয়েছি, আমি কৌনিক UrlSearchParams আমার জন্য খুব ভাল কাজ করেছি, এটি পরামিতিগুলির এনকোডিংয়েরও যত্ন নেয়।

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();

Answer 11

এটি আমার পক্ষে কাজ করেছে। আমি ফ্রন্ট-এন্ডের জন্য কৌণিক এবং ব্যাক-এন্ডের জন্য লারাভেল পিএইচপি ব্যবহার করি। আমার প্রকল্পে, কৌণিক ওয়েব জারসন ডেটা লারাভেল ব্যাক-এন্ডে প্রেরণ করে।

এটি আমার কৌনিক নিয়ামক।

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);
        });

});

এটি আমার পিএইচপি ব্যাক-এন্ড লারাভেল নিয়ামক।

public function httpTest(){
        if (Input::has('username')) {
            $user =Input::all();
            return  Response::json($user)->setCallback(Input::get('callback'));
        }
    }

এটি আমার লারাভেল রাউটিং

Route::post('httpTest','HttpTestController@httpTest');

ব্রাউজারে ফলাফল

স্থিতি 200
ডেটা JSON_CALLBACK (username "ব্যবহারকারীর নাম": "ভিক্টোরিয়া", "পাসওয়ার্ড": "পাসওয়ার্ড", "কলব্যাক": "জেএসএন_সিএলএলব্যাক";); httpTesting.js: 18 টি শিরোনাম ফাংশন (c) {a || (a = sc (b)); রিটার্ন সি? এ [কে (সি)] || নাল: এ}

পোস্টম্যান নামে ক্রোম এক্সটেনশন রয়েছে। আপনার ব্যাক-এন্ড ইউআরএলটি কাজ করছে কিনা তা পরীক্ষা করতে আপনি ব্যবহার করতে পারেন। https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm?hl=en

আশা করি, আমার উত্তর আপনাকে সাহায্য করবে।