ajax - আমি কিভাবে অনুরোধ পেলোডের পরিবর্তে ডেটা ফর্ম হিসাবে তথ্য পোস্ট করতে পারি?




angularjs post (15)

নীচের কোডটিতে, AngularJS $http পদ্ধতিটি URL টি কল করে এবং xsrf বস্তুকে "অনুরোধের পেলোড" হিসাবে বর্ণনা করে (ক্রোম ডিবাগার নেটওয়ার্ক ট্যাবে বর্ণিত হিসাবে)। JQuery $.ajax পদ্ধতি একই কল করে তবে "ফর্ম ডেটা" হিসাবে xsrf জমা দেয়।

আমি কিভাবে AngularJS একটি অনুরোধ পেলো পরিবর্তে xsrf ফর্ম তথ্য হিসাবে জমা দিতে পারি?

var url = 'http://somewhere.com/';
var xsrf = {fkey: 'xsrf key'};

$http({
    method: 'POST',
    url: url,
    data: xsrf
}).success(function () {});

$.ajax({
    type: 'POST',
    url: url,
    data: xsrf,
    dataType: 'json',
    success: function() {}
});

AngularJS $http পরিষেবা ব্যবহার করুন এবং তার post পদ্ধতিটি ব্যবহার করুন বা $http ফাংশন কনফিগার করুন।


AngularJS v1.4.0 হিসাবে, একটি অন্তর্নির্মিত $httpParamSerializer পরিষেবা রয়েছে যা ডক্স পৃষ্ঠায় তালিকাভুক্ত বিধি অনুসারে কোনও $httpParamSerializer HTTP অনুরোধের অংশে রূপান্তরিত করে।

এটি এভাবে ব্যবহার করা যেতে পারে:

$http.post('http://example.com', $httpParamSerializer(formDataObj)).
    success(function(data){/* response status 200-299 */}).
    error(function(data){/* response status 400-999 */});

মনে রাখবেন যে সঠিক ফর্ম পোস্টের জন্য, Content-Type শিরোনামটি অবশ্যই পরিবর্তন করা উচিত। সমস্ত POST অনুরোধের জন্য বিশ্বব্যাপী এটি করার জন্য, এই কোডটি (অ্যালবিরোর অর্ধ-উত্তর থেকে নেওয়া) ব্যবহার করা যেতে পারে:

$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

বর্তমান পোস্টের জন্য শুধুমাত্র এটি করার জন্য, অনুরোধ-বস্তুর headers সম্পত্তিটি সংশোধন করা দরকার:

var req = {
 method: 'POST',
 url: 'http://example.com',
 headers: {
   'Content-Type': 'application/x-www-form-urlencoded'
 },
 data: $httpParamSerializer(formDataObj)
};

$http(req);

Symfony2 ব্যবহারকারীদের জন্য:

যদি আপনি এই কাজ করার জন্য আপনার জাভাস্ক্রিপ্টে কিছু পরিবর্তন করতে না চান তবে আপনি সিম্ফনি অ্যাপ্লিকেশনটিতে এই পরিবর্তনগুলি করতে পারেন:

Symfony \ Component \ HttpFoundation \ অনুরোধ ক্লাস প্রসারিত করে এমন একটি শ্রেণী তৈরি করুন:

<?php

namespace Acme\Test\MyRequest;

use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\ParameterBag;

class MyRequest extends Request{


/**
* Override and extend the createFromGlobals function.
* 
* 
*
* @return Request A new request
*
* @api
*/
public static function createFromGlobals()
{
  // Get what we would get from the parent
  $request = parent::createFromGlobals();

  // Add the handling for 'application/json' content type.
  if(0 === strpos($request->headers->get('CONTENT_TYPE'), 'application/json')){

    // The json is in the content
    $cont = $request->getContent();

    $json = json_decode($cont);

    // ParameterBag must be an Array.
    if(is_object($json)) {
      $json = (array) $json;
  }
  $request->request = new ParameterBag($json);

}

return $request;

}

}

এখন আপনি app_dev.php (অথবা যে কোনও ইন্ডেক্স ফাইল যা আপনি ব্যবহার করেন) তে ক্লাস ব্যবহার করেন

// web/app_dev.php

$kernel = new AppKernel('dev', true);
// $kernel->loadClassCache();
$request = ForumBundleRequest::createFromGlobals();

// use your class instead
// $request = Request::createFromGlobals();
$response = $kernel->handle($request);
$response->send();
$kernel->terminate($request, $response);

আপনার অ্যাপ্লিকেশন কনফিগে -

$httpProvider.defaults.transformRequest = function (data) {
        if (data === undefined)
            return data;
        var clonedData = $.extend(true, {}, data);
        for (var property in clonedData)
            if (property.substr(0, 1) == '$')
                delete clonedData[property];

        return $.param(clonedData);
    };

আপনার সম্পদ অনুরোধ সঙ্গে -

 headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }

আপনি নীচের সমাধান সঙ্গে চেষ্টা করতে পারেন

$http({
        method: 'POST',
        url: url-post,
        data: data-post-object-json,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        transformRequest: function(obj) {
            var str = [];
            for (var key in obj) {
                if (obj[key] instanceof Array) {
                    for(var idx in obj[key]){
                        var subObj = obj[key][idx];
                        for(var subKey in subObj){
                            str.push(encodeURIComponent(key) + "[" + idx + "][" + encodeURIComponent(subKey) + "]=" + encodeURIComponent(subObj[subKey]));
                        }
                    }
                }
                else {
                    str.push(encodeURIComponent(key) + "=" + encodeURIComponent(obj[key]));
                }
            }
            return str.join("&");
        }
    }).success(function(response) {
          /* Do something */
        });

আপনি বিশ্বব্যাপী আচরণ সংজ্ঞায়িত করতে পারেন:

$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

সুতরাং আপনাকে প্রতিবার এটি পুনরায় সংজ্ঞায়িত করতে হবে না:

$http.post("/handle/post", {
    foo: "FOO",
    bar: "BAR"
}).success(function (data, status, headers, config) {
    // TODO
}).error(function (data, status, headers, config) {
    // TODO
});

আমি অন্য কয়েকটি উত্তর নিয়েছি এবং কিছুটা ক্লিনার তৈরি করেছি, আপনার app.js এ আপনার angular.module এ এই .config() কল করুন।

.config(['$httpProvider', function ($httpProvider) {
  // Intercept POST requests, convert to standard form encoding
  $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
  $httpProvider.defaults.transformRequest.unshift(function (data, headersGetter) {
    var key, result = [];

    if (typeof data === "string")
      return data;

    for (key in data) {
      if (data.hasOwnProperty(key))
        result.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
    }
    return result.join("&");
  });
}]);

আমি বর্তমানে AngularJS গুগল গ্রুপে found নিম্নলিখিত সমাধানটি ব্যবহার করছি।

$http
.post('/echo/json/', 'json=' + encodeURIComponent(angular.toJson(data)), {
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }
}).success(function(data) {
    $scope.data = data;
});

মনে রাখবেন যে আপনি যদি পিএইচপি ব্যবহার করেন তবে Request::createFromGlobals() 2 HTTP কম্পোনেন্টের Request::createFromGlobals() এটি পড়ার জন্য কিছু ব্যবহার করতে হবে, যেমন $ _POST স্বয়ংক্রিয়ভাবে লোড হবে না।


এই এবং অন্যান্য সম্পর্কিত স্টাফ উপর যায় যে একটি সত্যিই চমৎকার টিউটোরিয়াল আছে - AJAX ফরম জমা: AngularJS ওয়ে

মূলত, আপনি একটি URL এনকোডেড স্ট্রিং হিসাবে ফর্ম ডেটা পাঠাচ্ছেন তা নির্দেশ করার জন্য POST অনুরোধের শিরোনাম সেট করতে হবে এবং একই ফর্ম্যাট পাঠাতে ডেটা সেট করুন

$http({
  method  : 'POST',
  url     : 'url',
  data    : $.param(xsrf),  // pass in data as strings
  headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
});

উল্লেখ্য, jQuery এর প্যারামিটার () সহায়ক ফাংশনটি এখানে স্ট্রিংয়ে ডাটা সিরিয়ালাইজ করার জন্য ব্যবহার করা হয় তবে আপনি jQuery ব্যবহার না করে নিজেও এটি নিজেও করতে পারেন।


এই বিষয়টির আশেপাশে অব্যাহত বিভ্রান্তি আমাকে এটি সম্পর্কে একটি ব্লগ পোস্ট লিখতে অনুপ্রাণিত করে। এই পোস্টে প্রস্তাব করা সমাধানটি আপনার বর্তমান শীর্ষ রেটযুক্ত সমাধানটির তুলনায় ভাল, কারণ এটি আপনাকে আপনার http তথ্য কলগুলির জন্য আপনার ডাটা অবজেক্টকে প্যারামিটারিজিং করতে বাধা দেয় না; অর্থাৎ আমার সমাধান দিয়ে আপনি সহজেই $ http.post (), ইত্যাদিতে প্রকৃত তথ্য বস্তুগুলি পাস করতে পারেন এবং এখনও পছন্দসই ফলাফল অর্জন করতে পারেন।

এছাড়াও, শীর্ষ রেট উত্তরটি $ .param () ফাংশনের জন্য পুরো jQuery জুড়ে অন্তর্ভুক্ত করার উপর নির্ভর করে, তবে আমার সমাধান jQuery অ্যাগনস্টিক, বিশুদ্ধ AngularJS প্রস্তুত।

http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/

আশাকরি এটা সাহায্য করবে.


এটি একটি সরাসরি উত্তর নয়, বরং একটি সামান্য ভিন্ন নকশা দিক:

একটি ফর্ম হিসাবে তথ্য পোস্ট করবেন না, তবে একটি JSON অবজেক্ট হিসাবে সরাসরি সার্ভার-পার্শ্ব বস্তুতে ম্যাপ করা হবে, অথবা REST শৈলী পাথ পরিবর্তনশীল ব্যবহার করুন

এখন আমি জানি যে আপনার ক্ষেত্রে কোনও বিকল্প উপযুক্ত হতে পারে না যেহেতু আপনি একটি XSRF কী পাস করার চেষ্টা করছেন। এটি একটি পাথ পরিবর্তনশীল মধ্যে এটি ম্যাপিং একটি ভয়ানক নকশা:

http://www.someexample.com/xsrf/{xsrfKey}

প্রকৃতির কারণে আপনি xsrf কীটি অন্য পথের পাশে পাশ করতে চান, /login , /book-appointment ইত্যাদি এবং আপনি আপনার সুন্দর URL টি জগাখিচুড়ি করতে চান না

আগ্রহজনকভাবে এটি একটি বস্তু ক্ষেত্র হিসাবে যুক্ত করাও উপযুক্ত নয়, কারণ এখন জেসন বস্তুর প্রত্যেকটিতে আপনি সার্ভারে পাস করেছেন যা আপনাকে ক্ষেত্র যোগ করতে হবে

{
  appointmentId : 23,
  name : 'Joe Citizen',
  xsrf : '...'
}

আপনি অবশ্যই আপনার সার্ভার-সাইড ক্লাসে অন্য ক্ষেত্র যুক্ত করতে চান না যা ডোমেন অবজেক্টের সাথে সরাসরি সেমিকান্টিক অ্যাসোসিয়েশন নেই।

আমার মতে আপনার xsrf কী পাস করার সর্বোত্তম উপায় একটি HTTP হেডারের মাধ্যমে। অনেক xsrf সুরক্ষা সার্ভার-পার্শ্ব ওয়েব ফ্রেমওয়ার্ক লাইব্রেরি এই সমর্থন করে। উদাহরণস্বরূপ জাভা স্প্রিং এ, আপনি X-CSRF-TOKEN হেডার ব্যবহার করে এটি পাস করতে পারেন

UI অবজেক্টে JS অবজেক্টের বাঁধাই করার কৌণিকর চমৎকার ক্ষমতা মানে আমরা একসাথে ফর্ম পোস্ট করার অনুশীলনটি পরিত্রাণ পেতে পারি এবং পরিবর্তে JSON পোস্ট করতে পারি। JSON সার্ভার-পার্শ্ব বস্তুতে সহজেই ডি-সিরিয়ালাইজড এবং মানচিত্র, অ্যারে, নেস্টেড অবজেক্ট ইত্যাদি জটিল তথ্য কাঠামোর সমর্থন করতে পারে।

আপনি কিভাবে একটি ফর্ম পেলਲੋਡ অ্যারে পোস্ট করবেন? সম্ভবত এই মত:

shopLocation=downtown&daysOpen=Monday&daysOpen=Tuesday&daysOpen=Wednesday

অথবা এটা:

shopLocation=downtwon&daysOpen=Monday,Tuesday,Wednesday

উভয় দরিদ্র নকশা ..


নিম্নোক্ত লাইনটি পাস হওয়া $ http অবজেক্টে যুক্ত করতে হবে:

headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}

এবং পাস হওয়া তথ্যটি একটি URL-এনকোড হওয়া স্ট্রিং রূপান্তর করা উচিত:

> $.param({fkey: "key"})
'fkey=key'

সুতরাং আপনার মত কিছু আছে:

$http({
    method: 'POST',
    url: url,
    data: $.param({fkey: "key"}),
    headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
})

থেকে: https://groups.google.com/forum/#!msg/angular/5nAedJ1LyO0/4Vj_72EZcDsJ

হালনাগাদ

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

  • শুধুমাত্র AngularJS পরিষেবাদি ব্যবহার করে ইউআরএল-এনকোডিং ভেরিয়েবল

যদি আপনি সমাধানটিতে jQuery ব্যবহার করতে চান না তবে আপনি এটি ব্যবহার করতে পারেন। সমাধানটি https://.com/a/1714899/1784301 থেকে আটকানো হয়েছে

$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: xsrf
}).success(function () {});

শুধু বিষয়বস্তু-প্রকার সেট যথেষ্ট নয়, পাঠানোর আগে url এনকোড ফর্ম তথ্য। $http.post(url, jQuery.param(data))






angular-http