একটি ফর্ম জমা মত জাভাস্ক্রিপ্ট পোস্ট অনুরোধ


1529

আমি একটি ব্রাউজারকে অন্য কোনও পৃষ্ঠায় পরিচালিত করার চেষ্টা করছি। আমি যদি জিইটি অনুরোধ চাই, তবে আমি বলতে পারি

document.location.href = 'http://example.com/q=a';

তবে আমি যে সংস্থানটিতে অ্যাক্সেসের চেষ্টা করছি সেটিতে আমি পোস্টের অনুরোধটি না ব্যবহার না করে সঠিকভাবে প্রতিক্রিয়া জানাতে পারি না। এটি যদি গতিশীলভাবে তৈরি না করা হয়, তবে আমি এইচটিএমএল ব্যবহার করতে পারি

<form action="http://example.com/" method="POST">
  <input type="hidden" name="q" value="a">
</form>

তারপরে আমি কেবল ডিওএম থেকে ফর্মটি জমা দেব।

তবে সত্যিই আমি জাভাস্ক্রিপ্ট কোড চাই যা আমাকে বলতে দেয়

post_to_url('http://example.com/', {'q':'a'});

সেরা ক্রস ব্রাউজার বাস্তবায়ন কি?

সম্পাদন করা

আমি দুঃখিত আমি পরিষ্কার ছিল না। আমার কাছে এমন একটি সমাধান প্রয়োজন যা ব্রাউজারের অবস্থান পরিবর্তন করে, যেমন একটি ফর্ম জমা দেওয়ার মতো। যদি এক্সএমএলএইচটিএইচপিআরপিওয়েস্টের মাধ্যমে এটি সম্ভব হয় তবে তা স্পষ্ট নয়। এবং এটি অ্যাসিঙ্ক্রোনাস হওয়া উচিত নয়, বা এক্সএমএল ব্যবহার করা উচিত নয়, তাই অ্যাজাক্স এর উত্তর নয়।


1
অন্য থ্রেডে যেমন উল্লেখ করা হয়েছে সেখানে একটি জকিউয়ারি ".ডাইরেক্ট" প্লাগইন রয়েছে যা পোষ্ট বা জিইটি পদ্ধতিতে কাজ করে। এটি লুকানো ইনপুটগুলি সহ একটি ফর্ম তৈরি করে এবং এটি আপনার জন্য জমা দেয়। উদা: red .redirect ('demo.php', {'arg1': 'value1', 'arg2': 'value2'}); github.com/mgalante/jquery.redirect/blob/master/…
ওজি শান

উত্তর:


2143

গতিশীলভাবে <input>একটি ফর্ম তৈরি করুন এবং এটি জমা দিন

/**
 * sends a request to the specified url from a form. this will change the window location.
 * @param {string} path the path to send the post request to
 * @param {object} params the paramiters to add to the url
 * @param {string} [method=post] the method to use on the form
 */

function post(path, params, method='post') {

  // The rest of this code assumes you are not using a library.
  // It can be made less wordy if you use one.
  const form = document.createElement('form');
  form.method = method;
  form.action = path;

  for (const key in params) {
    if (params.hasOwnProperty(key)) {
      const hiddenField = document.createElement('input');
      hiddenField.type = 'hidden';
      hiddenField.name = key;
      hiddenField.value = params[key];

      form.appendChild(hiddenField);
    }
  }

  document.body.appendChild(form);
  form.submit();
}

উদাহরণ:

post('/contact/', {name: 'Johnny Bravo'});

সম্পাদনা : যেহেতু এটি এত বেশি পরিমাণে উন্নীত হয়েছে, আমি ধারণা করছি লোকেরা এটি অনেকগুলি অনুলিপি-পেস্ট করবে। সুতরাং আমি hasOwnPropertyকোনও অজানা ত্রুটিগুলি ঠিক করার জন্য চেকটি যুক্ত করেছি ।


10
ডেটা প্যারামে অ্যারে সম্পর্কে কী? জ্যাকুই পোস্ট () ব্যাখ্যা করে উদাহরণস্বরূপ: "ডেটা: {অ্যারে: [1, 2, 3]}" হিসাবে? অ্যারে = 1 এবং অ্যারে = 2 এবং অ্যারে = 3। হুইস কোডটি আরও একটি ফলাফল দেয়।
স্কিট 6

18
সতর্কতা: অনেকগুলি উত্সাহ থাকা সত্ত্বেও, এই সমাধানটি সীমাবদ্ধ এবং কোনও ফর্মের অভ্যন্তরে অ্যারে বা নেস্টেড বস্তুগুলি পরিচালনা করে না। অন্যথায় এটি দুর্দান্ত উত্তর।
ইমরগিনস

3
আশ্চর্যজনক এটি স্থানীয়ভাবে html দ্বারা সমর্থিত নয় বা জাভাস্ক্রিপ্ট jquery নয় .. আপনার এটি কোড করতে হবে।
ইউজিন

14
@ মিরিকি এই স্নিপেটের মূল বিষয়টি ব্রাউজারটিকে ক্রিয়া দ্বারা নির্দিষ্ট একটি নতুন ইউআরএলকে পুনর্নির্দেশ করা; যদি আপনি একই পৃষ্ঠায় থাকেন তবে আপনি কেবল আপনার ডেটা পোস্ট করার জন্য traditionalতিহ্যবাহী এজেএক্স ব্যবহার করতে পারেন। যেহেতু ব্রাউজারটি কোনও নতুন পৃষ্ঠায় নেভিগেট করা উচিত, বর্তমান পৃষ্ঠার DOM এর বিষয়বস্তু কোনও বিবেচনা করবে না
কেন বেলোস

6
পাইথন, জ্যাঙ্গো এবং সম্ভবত ফ্লাস্ক ব্যবহারকারীরা এই ত্রুটিটি দেখতে পাবেন: "নিষিদ্ধ (403) CS সিএসআরএফ যাচাইকরণ ব্যর্থ হয়েছে Requ এই ক্ষেত্রে, আপনাকে অবশ্যই এইভাবে সিএসআরএফ টোকেন পাস করতে হবে: পোস্ট ('/ যোগাযোগ /', {নাম: 'জনি ব্রাভো', csrfmiddlewaretoken: $ ("# csrf_token")। ভাল (););
ডেভিডসন লিমা

129

এটি jQuery ব্যবহার করে নির্বাচিত উত্তরের একটি সংস্করণ হবে ।

// Post to the provided URL with the specified parameters.
function post(path, parameters) {
    var form = $('<form></form>');

    form.attr("method", "post");
    form.attr("action", path);

    $.each(parameters, function(key, value) {
        var field = $('<input></input>');

        field.attr("type", "hidden");
        field.attr("name", key);
        field.attr("value", value);

        form.append(field);
    });

    // The form needs to be a part of the document in
    // order for us to be able to submit it.
    $(document.body).append(form);
    form.submit();
}

2
স্থির করা হয়েছে: এখন ডকুমেন্ট.বিতে সংযোজন
রায়ান ডেলুচি

7
অ্যারে এবং অবজেক্টস সমর্থন করার জন্য এটিকে সামান্য সংশোধন করুন gist.github.com/hom3chuk/692bf12fe7dac2486212
НЛО

3
মানটিতে যদি একটি ডেঙ্গিওর এক্সএমএল অক্ষর থাকে তবে এটি এএসপি.নেট কাজ করবে না enc নেট এনকোডিউরি কম্পোনেন্ট (মান) প্রয়োজন। তারপরে, সার্ভার-সাইডেও urlDecode প্রয়োজন।
স্টিফান স্টেইগার 13'18

আপনার প্রয়োজনগুলি যদি সহজ হয়, তবে এই ফাংশনটি অপ্রয়োজনীয়। এই ওয়ান-লাইনার যথেষ্ট:$("<form method='POST' action='https://example.com'><input type='hidden' name='q' value='a'/></form>").appendTo("body").submit();
রিনোগো

71

@ অ্যারনের উত্তরের একটি সহজ দ্রুত এবং নোংরা বাস্তবায়ন:

document.body.innerHTML += '<form id="dynForm" action="http://example.com/" method="post"><input type="hidden" name="q" value="a"></form>';
document.getElementById("dynForm").submit();

অবশ্যই, আপনার পরিবর্তে কোনও জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক যেমন প্রোটোটাইপ বা jQuery ব্যবহার করা উচিত ...


6
বর্তমান ব্রাউজার উইন্ডো / ট্যাবে ওয়েব পৃষ্ঠা লোড না করে কি এটি করার কোনও উপায় আছে?
pbreitenbach

54

এই উত্তরেcreateElement প্রদত্ত ফাংশনটি ব্যবহার করে , যা সাধারণত এর সাথে তৈরি উপাদানগুলিতে নাম বৈশিষ্ট্যের সাথে আইইয়ের ভাঙ্গনের কারণে প্রয়োজনীয় :document.createElement

function postToURL(url, values) {
    values = values || {};

    var form = createElement("form", {action: url,
                                      method: "POST",
                                      style: "display: none"});
    for (var property in values) {
        if (values.hasOwnProperty(property)) {
            var value = values[property];
            if (value instanceof Array) {
                for (var i = 0, l = value.length; i < l; i++) {
                    form.appendChild(createElement("input", {type: "hidden",
                                                             name: property,
                                                             value: value[i]}));
                }
            }
            else {
                form.appendChild(createElement("input", {type: "hidden",
                                                         name: property,
                                                         value: value}));
            }
        }
    }
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
}

6
জমা দেওয়ার পরে আপনার কি শিশুটিকে অপসারণ করা দরকার? পৃষ্ঠাটি যাইহোক দূরে যায় না?
নীল

2
অধিবেশন ব্যবহার করার পরে এবং সেগুলি ডেটা সংরক্ষণ করা ব্যতীত জমা দেওয়ার পরে শিশুটিকে সরানোর কোনও সুবিধা নেই।
মিলিও

6
@ কনটুসিএইচকিউ ফর্ম টার্গেটটি সেট না করা থাকলেও পৃষ্ঠাটি ঠিক তেমনি অপরিবর্তিত থাকতে পারে। নেই 204 No Content এ উদাহরণস্বরূপ,।
ইউজিন রায়বতসেভ

38

রাকেশ পাইয়ের উত্তরটি আশ্চর্যজনক, তবে যখন আমি ডাকা একটি ফিল্ড সহ একটি ফর্ম পোস্ট করার চেষ্টা করি তখন আমার ( সাফারিতে ) সমস্যা হয় submit। উদাহরণস্বরূপ post_to_url("http://google.com/",{ submit: "submit" } );,। আমি এই পরিবর্তনশীল স্থান সংঘর্ষের চারপাশে চলার জন্য ফাংশনটি সামান্য প্যাচ করেছি।

    function post_to_url(path, params, method) {
        method = method || "post";

        var form = document.createElement("form");

        //Move the submit function to another variable
        //so that it doesn't get overwritten.
        form._submit_function_ = form.submit;

        form.setAttribute("method", method);
        form.setAttribute("action", path);

        for(var key in params) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
        }

        document.body.appendChild(form);
        form._submit_function_(); //Call the renamed function.
    }
    post_to_url("http://google.com/", { submit: "submit" } ); //Works!

7
2018 এবং এখনও আরও ভাল উত্তর না?
iiirxs

30

না। আপনার কাছে কোনও ফর্ম জমা দেওয়ার মতো জাভাস্ক্রিপ্ট পোস্টের অনুরোধ থাকতে পারে না।

আপনার যা যা থাকতে পারে তা হ'ল এইচটিএমএলে একটি ফর্ম, তারপরে এটি জাভাস্ক্রিপ্টের সাথে জমা দিন। (যেমনটি এই পৃষ্ঠায় বহুবার ব্যাখ্যা করা হয়েছে)।

আপনি নিজে এইচটিএমএল তৈরি করতে পারেন, এইচটিএমএল লেখার জন্য আপনার জাভাস্ক্রিপ্টের দরকার নেই। লোকেদের পরামর্শ দিলে তা নির্বোধ হবে।

<form id="ninja" action="http://example.com/" method="POST">
  <input id="donaldduck" type="hidden" name="q" value="a">
</form>

আপনার ফাংশনটি ফর্মটি আপনি যেভাবে চান কনফিগার করবে।

function postToURL(a,b,c){
   document.getElementById("ninja").action     = a;
   document.getElementById("donaldduck").name  = b;
   document.getElementById("donaldduck").value = c;
   document.getElementById("ninja").submit();
}

তারপরে, এটি ব্যবহার করুন।

postToURL("http://example.com/","q","a");

তবে আমি কেবল ফাংশনটি ছেড়ে দিয়ে যাব।

document.getElementById('donaldduck').value = "a";
document.getElementById("ninja").submit();

অবশেষে, শৈলীর সিদ্ধান্ত সিসিএস ফাইলে যায়।

#ninja{ 
  display:none;
}

ব্যক্তিগতভাবে আমি মনে করি ফর্মগুলি নাম দিয়ে সম্বোধন করা উচিত তবে এখনই এটি গুরুত্বপূর্ণ নয়।


26

আপনার যদি প্রোটোটাইপ ইনস্টল করা থাকে তবে আপনি লুকানো ফর্মটি তৈরি এবং জমা দেওয়ার জন্য কোডটি আরও শক্ত করতে পারেন:

 var form = new Element('form',
                        {method: 'post', action: 'http://example.com/'});
 form.insert(new Element('input',
                         {name: 'q', value: 'a', type: 'hidden'}));
 $(document.body).insert(form);
 form.submit();

25

এটি রাকেশের উত্তর, তবে অ্যারেগুলির সমর্থন সহ (যা ফর্মগুলিতে বেশ সাধারণ)

সরল জাভাস্ক্রিপ্ট:

function post_to_url(path, params, method) {
    method = method || "post"; // Set method to post by default, if not specified.

    // The rest of this code assumes you are not using a library.
    // It can be made less wordy if you use one.
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    var addField = function( key, value ){
        var hiddenField = document.createElement("input");
        hiddenField.setAttribute("type", "hidden");
        hiddenField.setAttribute("name", key);
        hiddenField.setAttribute("value", value );

        form.appendChild(hiddenField);
    }; 

    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            if( params[key] instanceof Array ){
                for(var i = 0; i < params[key].length; i++){
                    addField( key, params[key][i] )
                }
            }
            else{
                addField( key, params[key] ); 
            }
        }
    }

    document.body.appendChild(form);
    form.submit();
}

ওহ, এবং এখানে jquery সংস্করণ: (কিছুটা ভিন্ন কোড, তবে একই জিনিসটিতে ফোটে)

function post_to_url(path, params, method) {
    method = method || "post"; // Set method to post by default, if not specified.

    var form = $(document.createElement( "form" ))
        .attr( {"method": method, "action": path} );

    $.each( params, function(key,value){
        $.each( value instanceof Array? value : [value], function(i,val){
            $(document.createElement("input"))
                .attr({ "type": "hidden", "name": key, "value": val })
                .appendTo( form );
        }); 
    } ); 

    form.appendTo( document.body ).submit(); 
}

3
পিএস আমি এখন সেই ফাংশনটি ব্যবহার করে উপভোগ করছি তবে ফর্মটি শেষে জমা দেওয়ার পরিবর্তে আমি কেবল এটিকে কলারের কাছে ফিরিয়ে দিই। এইভাবে আমি অতিরিক্ত বৈশিষ্ট্যগুলি সহজেই সেট করতে বা প্রয়োজনে এটির সাথে অন্যান্য জিনিসগুলি করতে পারি।
kritzikratzi

3
গ্রেট! খুব দরকারী. এই ফর্মটির সার্ভারে পিএইচপি-র উপর নির্ভরশীল ব্যক্তিদের জন্য একটি ছোট পরিবর্তন, আমি অ্যাডফিল্ড (কী, প্যারাম [কী] [i]) অ্যাডফিল্ডে (কী + '[]]', প্যারামগুলি [কী] [i]) পরিবর্তন করেছি। এটি $ _POST [কী] অ্যারে হিসাবে উপলব্ধ করে।
থভা

2
@ থাভা আপনি নিজের ইনপুট ক্ষেত্রে নাম = "ব্লে []" সেট করতে পারেন। যাইহোক, পিএইচপি ব্যতীত অন্য ভাষা রয়েছে যা [] সিনট্যাক্সকে সমর্থন করে না তাই আমি এই অপরিবর্তিত রেখে দিচ্ছি।
kritzikratzi

17

একটি সমাধান হ'ল ফর্মটি তৈরি করা এবং জমা দেওয়া। একটি বাস্তবায়ন হয়

function post_to_url(url, params) {
    var form = document.createElement('form');
    form.action = url;
    form.method = 'POST';

    for (var i in params) {
        if (params.hasOwnProperty(i)) {
            var input = document.createElement('input');
            input.type = 'hidden';
            input.name = i;
            input.value = params[i];
            form.appendChild(input);
        }
    }

    form.submit();
}

সুতরাং আমি একটি সাধারণের সাথে একটি URL সংক্ষিপ্ত বুকমার্কলেট প্রয়োগ করতে পারি

javascript:post_to_url('http://is.gd/create.php', {'URL': location.href});

16

আচ্ছা, আশা করি আমি অন্যান্য সমস্ত পোস্ট পড়ে থাকি তাই রাকেশ পাইয়ের উত্তর থেকে এটি তৈরি করতে আমি সময় নষ্ট করি না। এখানে একটি পুনরাবৃত্ত সমাধান যা অ্যারে এবং অবজেক্টগুলির সাথে কাজ করে। JQuery এর উপর কোনও নির্ভরতা নেই।

কেসগুলি পরিচালনা করার জন্য একটি বিভাগ যুক্ত করা হয়েছে যেখানে পুরো ফর্মটি অ্যারের মতো জমা দেওয়া উচিত। (যেমন আইটেমের তালিকার চারপাশে কোনও মোড়কের জিনিস নেই)

/**
 * Posts javascript data to a url using form.submit().  
 * Note: Handles json and arrays.
 * @param {string} path - url where the data should be sent.
 * @param {string} data - data as javascript object (JSON).
 * @param {object} options -- optional attributes
 *  { 
 *    {string} method: get/post/put/etc,
 *    {string} arrayName: name to post arraylike data.  Only necessary when root data object is an array.
 *  }
 * @example postToUrl('/UpdateUser', {Order {Id: 1, FirstName: 'Sally'}});
 */
function postToUrl(path, data, options) {
    if (options === undefined) {
        options = {};
    }

    var method = options.method || "post"; // Set method to post by default if not specified.

    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    function constructElements(item, parentString) {
        for (var key in item) {
            if (item.hasOwnProperty(key) && item[key] != null) {
                if (Object.prototype.toString.call(item[key]) === '[object Array]') {
                    for (var i = 0; i < item[key].length; i++) {
                        constructElements(item[key][i], parentString + key + "[" + i + "].");
                    }
                } else if (Object.prototype.toString.call(item[key]) === '[object Object]') {
                    constructElements(item[key], parentString + key + ".");
                } else {
                    var hiddenField = document.createElement("input");
                    hiddenField.setAttribute("type", "hidden");
                    hiddenField.setAttribute("name", parentString + key);
                    hiddenField.setAttribute("value", item[key]);
                    form.appendChild(hiddenField);
                }
            }
        }
    }

    //if the parent 'data' object is an array we need to treat it a little differently
    if (Object.prototype.toString.call(data) === '[object Array]') {
        if (options.arrayName === undefined) console.warn("Posting array-type to url will doubtfully work without an arrayName defined in options.");
        //loop through each array item at the parent level
        for (var i = 0; i < data.length; i++) {
            constructElements(data[i], (options.arrayName || "") + "[" + i + "].");
        }
    } else {
        //otherwise treat it normally
        constructElements(data, "");
    }

    document.body.appendChild(form);
    form.submit();
};

1
এটি নেস্টেড বস্তুগুলিকে সঠিকভাবে এনকোড করে না বলে মনে হচ্ছে।
এমপেন

1
@ পেন?
এমরগিনস

1
না, দুঃখিত। নিজেকে লেখার পক্ষে যথেষ্ট সহজ ছিল; ডিবাগ করার সময় মূল্য নয়।
এমপেন

12

তিনটি বিকল্প এখানে।

  1. স্ট্যান্ডার্ড জাভাস্ক্রিপ্ট উত্তর: একটি কাঠামো ব্যবহার করুন! বেশিরভাগ অ্যাজাক্স ফ্রেমওয়ার্কগুলি আপনাকে এক্সএমএলএইচটিপিআরপিউস্ট পোষ্ট করার সহজ উপায়টিকে বিমূর্ত করবে ।

  2. এক্সএমএলএইচটিটিপি অনুরোধটি নিজেকে অনুরোধ করুন, পোস্ট পাওয়ার পরিবর্তে উন্মুক্ত পদ্ধতিতে পাস করুন। ( এক্সএমএলএইচটিটিপিআরকুয়েস্টে (অ্যাজাক্স) পোস্টের পদ্ধতি ব্যবহারের আরও তথ্য ) )

  3. জাভাস্ক্রিপ্টের মাধ্যমে, গতিশীলভাবে একটি ফর্ম তৈরি করুন, একটি ক্রিয়া যুক্ত করুন, আপনার ইনপুট যুক্ত করুন এবং এটি জমা দিন।


5
XMLHTTPRequest উইন্ডোটি আপডেট করে না। আপনি কি বলার চেষ্টা করছেন যে আমার সাথে একটি ডকুমেন্ট.রাইট (http.responseText) দিয়ে এজেএক্স দিয়ে শেষ করা উচিত?
জোসেফ হোলস্টেন

11
ফ্রেমওয়ার্কের সাথে অন্য কিছু করতে রাজি না হলে কেন কেউ তার প্রকল্পে 30 কে + যুক্ত করা উচিত?
ডেমেন্টিক

12

অন্যরা যেমন কিছু পরামর্শ দিয়েছিল তেমন আমি এজাক রুটে নেমে যাব:

var xmlHttpReq = false;

var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
    self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
    self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}

self.xmlHttpReq.open("POST", "YourPageHere.asp", true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

self.xmlHttpReq.setRequestHeader("Content-length", QueryString.length);



self.xmlHttpReq.send("?YourQueryString=Value");

1
আনকড রেফারেন্স এরিয়ার: কোয়েরিস্ট্রিং সংজ্ঞায়িত হয়নি।
চেজ রবার্টস

11

সবচেয়ে সহজ উপায় অ্যাজাক্স পোস্ট অনুরোধটি ব্যবহার করা:

$.ajax({
    type: "POST",
    url: 'http://www.myrestserver.com/api',
    data: data,
    success: success,
    dataType: dataType
    });

কোথায়:

  • তথ্য একটি বস্তু
  • ডেটা টাইপ হ'ল সার্ভার দ্বারা প্রত্যাশিত ডেটা (এক্সএমএল, জসন, স্ক্রিপ্ট, পাঠ্য, এইচটিএমএল)
  • url হ'ল আপনার RESt সার্ভারের ঠিকানা বা সার্ভারের যে কোনও ক্রিয়াকলাপ যা HTTP-POST স্বীকার করে।

তারপরে সাফল্য হ্যান্ডলারটিতে উইন্ডো.লোকেশনের মতো কিছু দিয়ে ব্রাউজারটি পুনঃনির্দেশ করুন।


5
আপনি উল্লেখ করেননি যে আপনি যে পদ্ধতির অফার করেছেন সেটি jQuery জাভাস্ক্রিপ্ট লাইব্রেরির উপর ভিত্তি করে ।
ডেভিডআরআর

8
আপনি প্রশ্নের বিন্দুটিও মিস করেছেন - তিনি 'একটি ব্রাউজারকে অন্য কোনও পৃষ্ঠায় ডাইরেক্ট করতে' চান, এজ্যাক্স অনুরোধ না করে।
কালো

আপনি উত্তরটির জন্য অপেক্ষা করতে পারেন এবং তারপরে ডকুমেন্ট.লোকেশন = {url}; আপনি যে কোনও ফাইল ডাউনলোডে পুনঃনির্দেশ করে দিচ্ছেন তবে আমি এটি কল্পনা করতে পারি না যে এটি কাজ করে না place
এপিওরোকস

11

এখানে আমি jQuery ব্যবহার করে এটি কীভাবে লিখেছি। ফায়ারফক্স এবং ইন্টারনেট এক্সপ্লোরারে পরীক্ষিত।

function postToUrl(url, params, newWindow) {
    var form = $('<form>');
    form.attr('action', url);
    form.attr('method', 'POST');
    if(newWindow){ form.attr('target', '_blank'); 
  }

  var addParam = function(paramName, paramValue) {
      var input = $('<input type="hidden">');
      input.attr({ 'id':     paramName,
                 'name':   paramName,
                 'value':  paramValue });
      form.append(input);
    };

    // Params is an Array.
    if(params instanceof Array){
        for(var i=0; i<params.length; i++) {
            addParam(i, params[i]);
        }
    }

    // Params is an Associative array or Object.
    if(params instanceof Object) {
        for(var key in params){
            addParam(key, params[key]);
        }
    }

    // Submit the form, then remove it from the page
    form.appendTo(document.body);
    form.submit();
    form.remove();
}

1
আমার জন্য কাজ করেছেন। ধন্যবাদ। (ক্রোমে পরীক্ষিত)
dannie.f

2
আমি মনে করি এখানে সমস্যা হতে পারে জমাটি ফেরত দেওয়ার আগে ফর্মটি সরিয়ে দেওয়া হয়েছে। আমি শুনেছি কিছু ব্রাউজারগুলিতে যদি আপনি জমাটি শেষ হওয়ার আগে ফর্মটি সরিয়ে বা সরিয়ে ফেলেন, হ্যান্ডলারগুলি আগুন লাগবে না। পরিবর্তে, হ্যান্ডলারের দস্তাবেজ থেকে ফর্মটি সরান।
জেফ ডিকিউ

একটি যাদুমন্ত্র মত কাজ করে. ফায়ারফক্স + Chrome + আই 11 এ পরীক্ষিত - এর জন্য আপনাকে অনেক ধন্যবাদ!
Deunz

6

প্রোটোটাইপ গ্রন্থাগার একটি hashtable বস্তু, একটি ".toQueryString ()" পদ্ধতি, যা আপনি সহজেই একটি ক্যোয়ারী স্ট্রিং শৈলী স্ট্রিং মধ্যে একটি জাভাস্ক্রিপ্ট অবজেক্ট / কাঠামো চালু করতে পারবেন সঙ্গে অন্তর্ভুক্ত করা হয়েছে। যেহেতু পোস্টটির জন্য ক্যোরি-স্ট্রিং বিন্যাসিত স্ট্রিং হওয়ার অনুরোধটির "বডি" প্রয়োজন, এটি আপনার অ্যাজাক্স অনুরোধটিকে পোস্ট হিসাবে সঠিকভাবে কাজ করার অনুমতি দেয়। প্রোটোটাইপ ব্যবহার করে এখানে একটি উদাহরণ দেওয়া হয়েছে:

$req = new Ajax.Request("http://foo.com/bar.php",{
    method: 'post',
    parameters: $H({
        name: 'Diodeus',
        question: 'JavaScript posts a request like a form request',
        ...
    }).toQueryString();
};

1
এই সমাধান হ'ল কয়েকটির মধ্যে একটি যা বর্তমানে প্রদর্শিত দস্তাবেজটিকে সার্ভারের উত্তরের পরিবর্তে প্রতিস্থাপন করে না।
দোথবার্ট

4

এটি আমার ক্ষেত্রে নিখুঁতভাবে কাজ করে:

document.getElementById("form1").submit();

আপনি এটি ফাংশনে যেমন ব্যবহার করতে পারেন:

function formSubmit() {
     document.getElementById("frmUserList").submit();
} 

এটি ব্যবহার করে আপনি ইনপুটগুলির সমস্ত মান পোস্ট করতে পারেন।


3

তবুও অন্য পুনরাবৃত্তির সমাধান, যেহেতু অন্যদের মধ্যে কেউ কেউ ভেঙে গেছে বলে মনে হচ্ছে (আমি তাদের সকলের পরীক্ষা করি নি)। এটি একটি লোডাশ 3.x এবং ইএস 6 এর উপর নির্ভর করে (jQuery প্রয়োজন নেই):

function createHiddenInput(name, value) {
    let input = document.createElement('input');
    input.setAttribute('type','hidden');
    input.setAttribute('name',name);
    input.setAttribute('value',value);
    return input;
}

function appendInput(form, name, value) {
    if(_.isArray(value)) {
        _.each(value, (v,i) => {
            appendInput(form, `${name}[${i}]`, v);
        });
    } else if(_.isObject(value)) {
        _.forOwn(value, (v,p) => {
            appendInput(form, `${name}[${p}]`, v);
        });
    } else {
        form.appendChild(createHiddenInput(name, value));
    }
}

function postToUrl(url, data) {
    let form = document.createElement('form');
    form.setAttribute('method', 'post');
    form.setAttribute('action', url);

    _.forOwn(data, (value, name) => {
        appendInput(form, name, value);
    });

    form.submit();
}

3

আমার সমাধান গভীরভাবে নেস্ট করা বস্তুগুলিকে এনকোড করবে, বর্তমানে @ রাকেশপাই দ্বারা গৃহীত সমাধানের বিপরীতে।

নেস্টেড বস্তুগুলিকে পরামিতিগুলিতে রূপান্তর করতে এটি 'qs' এনপিএম গ্রন্থাগার এবং এর স্ট্রিংফাই ফাংশন ব্যবহার করে।

এই কোডটি একটি ব্যাক-এন্ড ব্যাক-এন্ডের সাথে ভালভাবে কাজ করে, যদিও আপনার স্ট্রিংয়ে যাওয়ার জন্য অপশনগুলি সংশোধন করে যা প্রয়োজন তা ব্যাকএন্ডের সাথে কাজ করতে এটি পরিবর্তন করতে সক্ষম হওয়া উচিত। রেলগুলির জন্য অ্যারে ফর্ম্যাটটি "বন্ধনী" এ সেট করা দরকার।

import qs from "qs"

function normalPost(url, params) {
  var form = document.createElement("form");
  form.setAttribute("method", "POST");
  form.setAttribute("action", url);

  const keyValues = qs
    .stringify(params, { arrayFormat: "brackets", encode: false })
    .split("&")
    .map(field => field.split("="));

  keyValues.forEach(field => {
    var key = field[0];
    var value = field[1];
    var hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "hidden");
    hiddenField.setAttribute("name", key);
    hiddenField.setAttribute("value", value);
    form.appendChild(hiddenField);
  });
  document.body.appendChild(form);
  form.submit();
}

উদাহরণ:

normalPost("/people/new", {
      people: [
        {
          name: "Chris",
          address: "My address",
          dogs: ["Jordan", "Elephant Man", "Chicken Face"],
          information: { age: 10, height: "3 meters" }
        },
        {
          name: "Andrew",
          address: "Underworld",
          dogs: ["Doug", "Elf", "Orange"]
        },
        {
          name: "Julian",
          address: "In a hole",
          dogs: ["Please", "Help"]
        }
      ]
    });

এই রেল প্যারামিটার উত্পাদন করে:

{"authenticity_token"=>"...",
 "people"=>
  [{"name"=>"Chris", "address"=>"My address", "dogs"=>["Jordan", "Elephant Man", "Chicken Face"], "information"=>{"age"=>"10", "height"=>"3 meters"}},
   {"name"=>"Andrew", "address"=>"Underworld", "dogs"=>["Doug", "Elf", "Orange"]},
   {"name"=>"Julian", "address"=>"In a hole", "dogs"=>["Please", "Help"]}]}


1

এটি অ্যালানের বিকল্প 2 (উপরে) এর মতো। কীভাবে httpobj ইনস্ট্যান্ট করবেন তা একটি অংশ হিসাবে রেখে দেওয়া হয়েছে।

httpobj.open("POST", url, true);
httpobj.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');
httpobj.onreadystatechange=handler;
httpobj.send(post);

1

এটি jQuery ব্যবহার করে beauSD এর কোডের উপর ভিত্তি করে। এটি উন্নত হয়েছে সুতরাং এটি বস্তুর উপর পুনরাবৃত্তভাবে কাজ করে।

function post(url, params, urlEncoded, newWindow) {
    var form = $('<form />').hide();
    form.attr('action', url)
        .attr('method', 'POST')
        .attr('enctype', urlEncoded ? 'application/x-www-form-urlencoded' : 'multipart/form-data');
    if(newWindow) form.attr('target', '_blank');

    function addParam(name, value, parent) {
        var fullname = (parent.length > 0 ? (parent + '[' + name + ']') : name);
        if(value instanceof Object) {
            for(var i in value) {
                addParam(i, value[i], fullname);
            }
        }
        else $('<input type="hidden" />').attr({name: fullname, value: value}).appendTo(form);
    };

    addParam('', params, '');

    $('body').append(form);
    form.submit();
}

1

আপনি गतिशीलভাবে ডিএইচটিএমএল ব্যবহার করে ফর্মটি যুক্ত করতে পারেন এবং তারপরে জমা দিতে পারেন।



1

আমি ডকুমেন্ট.ফর্মস জাভা ব্যবহার করি এবং ফর্মের সমস্ত উপাদান পেতে এটি লুপ করি, তারপরে xhttp এর মাধ্যমে প্রেরণ করি। সুতরাং জাভাস্ক্রিপ্ট / এজাক্স জমা দেওয়ার জন্য এটি আমার সমাধান (উদাহরণ হিসাবে অন্তর্ভুক্ত সমস্ত এইচটিএমএল):

          <!DOCTYPE html>
           <html>
           <body>
           <form>
       First name: <input type="text" name="fname" value="Donald"><br>
        Last name: <input type="text" name="lname" value="Duck"><br>
          Addr1: <input type="text" name="add" value="123 Pond Dr"><br>
           City: <input type="text" name="city" value="Duckopolis"><br>
      </form> 



           <button onclick="smc()">Submit</button>

                   <script>
             function smc() {
                  var http = new XMLHttpRequest();
                       var url = "yourphpfile.php";
                     var x = document.forms[0];
                          var xstr = "";
                         var ta ="";
                    var tb ="";
                var i;
               for (i = 0; i < x.length; i++) {
     if (i==0){ta = x.elements[i].name+"="+ x.elements[i].value;}else{
       tb = tb+"&"+ x.elements[i].name +"=" + x.elements[i].value;
             } }

           xstr = ta+tb;
      http.open("POST", url, true);
       http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

      http.onreadystatechange = function() {
          if(http.readyState == 4 && http.status == 200) {

        // do whatever you want to with the html output response here

                } 

               }
            http.send(xstr);

              }
         </script>

         </body>
     </html>

1

আপনি ফর্মটি জমা দেওয়ার জন্য jQuery এর ট্রিগার পদ্ধতিটি ব্যবহার করতে পারেন, ঠিক যেমন আপনি একটি বোতাম টিপেন,

$('form').trigger('submit')

এটি ব্রাউজারে জমা দেবে।


0

আমি অন্য পাতায় কোনও ব্যবহারকারীকে স্বয়ংক্রিয়ভাবে পোস্ট এবং পরিচালনা করার জন্য যে পদ্ধতিটি ব্যবহার করি তা হ'ল কেবল একটি লুকানো ফর্ম লিখুন এবং তারপরে এটি স্বয়ংক্রিয়ভাবে জমা দেওয়া। নিশ্চিত হন যে লুকানো ফর্মটি ওয়েব পৃষ্ঠায় একেবারে কোনও স্থান নেয় না। কোডটি এরকম কিছু হবে:

    <form name="form1" method="post" action="somepage.php">
    <input name="fielda" type="text" id="fielda" type="hidden">

    <textarea name="fieldb" id="fieldb" cols="" rows="" style="display:none"></textarea>
</form>
    document.getElementById('fielda').value="some text for field a";
    document.getElementById('fieldb').innerHTML="some text for multiline fieldb";
    form1.submit();

অটো জমা দেওয়ার আবেদন

একটি স্বয়ংক্রিয় জমা দেওয়ার অ্যাপ্লিকেশনটি ফর্মের মানগুলিকে নির্দেশ করবে যা ব্যবহারকারী স্বয়ংক্রিয়ভাবে অন্য পৃষ্ঠায় on পৃষ্ঠায় রেখে দেয়। এই জাতীয় অ্যাপ্লিকেশনটি এরকম হবে:

fieldapost=<?php echo $_post['fielda'];>
if (fieldapost !="") {
document.write("<form name='form1' method='post' action='previouspage.php'>
  <input name='fielda' type='text' id='fielda' type='hidden'>
</form>");
document.getElementById('fielda').value=fieldapost;
form1.submit();
}

0

আমি এখানে এটি কিভাবে।

function redirectWithPost(url, data){
        var form = document.createElement('form');
        form.method = 'POST';
        form.action = url;

        for(var key in data){
            var input = document.createElement('input');
            input.name = key;
            input.value = data[key];
            input.type = 'hidden';
            form.appendChild(input)
        }
        document.body.appendChild(form);
        form.submit();
    }

0

উপরের সমাধানগুলির কোনওটিই কেবল jQuery দিয়ে গভীর নেস্টেড প্যারামগুলি পরিচালনা করেন না, তাই এখানে আমার দুটি সেন্ট সমাধান রয়েছে।

আপনি যদি jQuery ব্যবহার করছেন এবং আপনার গভীর নেস্টেড প্যারামিটারগুলি পরিচালনা করতে হবে তবে আপনি নীচে এই ফাংশনটি ব্যবহার করতে পারেন:

    /**
     * Original code found here: https://github.com/mgalante/jquery.redirect/blob/master/jquery.redirect.js
     * I just simplified it for my own taste.
     */
    function postForm(parameters, url) {

        // generally we post the form with a blank action attribute
        if ('undefined' === typeof url) {
            url = '';
        }


        //----------------------------------------
        // SOME HELPER FUNCTIONS
        //----------------------------------------
        var getForm = function (url, values) {

            values = removeNulls(values);

            var form = $('<form>')
                .attr("method", 'POST')
                .attr("action", url);

            iterateValues(values, [], form, null);
            return form;
        };

        var removeNulls = function (values) {
            var propNames = Object.getOwnPropertyNames(values);
            for (var i = 0; i < propNames.length; i++) {
                var propName = propNames[i];
                if (values[propName] === null || values[propName] === undefined) {
                    delete values[propName];
                } else if (typeof values[propName] === 'object') {
                    values[propName] = removeNulls(values[propName]);
                } else if (values[propName].length < 1) {
                    delete values[propName];
                }
            }
            return values;
        };

        var iterateValues = function (values, parent, form, isArray) {
            var i, iterateParent = [];
            Object.keys(values).forEach(function (i) {
                if (typeof values[i] === "object") {
                    iterateParent = parent.slice();
                    iterateParent.push(i);
                    iterateValues(values[i], iterateParent, form, Array.isArray(values[i]));
                } else {
                    form.append(getInput(i, values[i], parent, isArray));
                }
            });
        };

        var getInput = function (name, value, parent, array) {
            var parentString;
            if (parent.length > 0) {
                parentString = parent[0];
                var i;
                for (i = 1; i < parent.length; i += 1) {
                    parentString += "[" + parent[i] + "]";
                }

                if (array) {
                    name = parentString + "[" + name + "]";
                } else {
                    name = parentString + "[" + name + "]";
                }
            }

            return $("<input>").attr("type", "hidden")
                .attr("name", name)
                .attr("value", value);
        };


        //----------------------------------------
        // NOW THE SYNOPSIS
        //----------------------------------------
        var generatedForm = getForm(url, parameters);

        $('body').append(generatedForm);
        generatedForm.submit();
        generatedForm.remove();
    }

এটি কীভাবে ব্যবহার করতে হয় তার একটি উদাহরণ এখানে। এইচটিএমএল কোড:

<button id="testButton">Button</button>

<script>
    $(document).ready(function () {
        $("#testButton").click(function () {
            postForm({
                csrf_token: "abcd",
                rows: [
                    {
                        user_id: 1,
                        permission_group_id: 1
                    },
                    {
                        user_id: 1,
                        permission_group_id: 2
                    }
                ],
                object: {
                    apple: {
                        color: "red",
                        age: "23 days",
                        types: [
                            "golden",
                            "opal",
                        ]
                    }
                },
                the_null: null, // this will be dropped, like non-checked checkboxes are dropped
            });
        });
    });
</script>

এবং আপনি যদি পরীক্ষার বোতামটি ক্লিক করেন তবে এটি ফর্মটি পোস্ট করবে এবং আপনি পোস্টে নিম্নলিখিত মানগুলি পাবেন:

array(3) {
  ["csrf_token"] => string(4) "abcd"
  ["rows"] => array(2) {
    [0] => array(2) {
      ["user_id"] => string(1) "1"
      ["permission_group_id"] => string(1) "1"
    }
    [1] => array(2) {
      ["user_id"] => string(1) "1"
      ["permission_group_id"] => string(1) "2"
    }
  }
  ["object"] => array(1) {
    ["apple"] => array(3) {
      ["color"] => string(3) "red"
      ["age"] => string(7) "23 days"
      ["types"] => array(2) {
        [0] => string(6) "golden"
        [1] => string(4) "opal"
      }
    }
  }
}

দ্রষ্টব্য: আপনি যদি বর্তমান পৃষ্ঠার চেয়ে অন্য url এ ফর্মটি পোস্ট করতে চান তবে আপনি url পোস্টফর্ম ফাংশনের দ্বিতীয় যুক্তি হিসাবে উল্লেখ করতে পারেন।

সুতরাং উদাহরণস্বরূপ (আপনার উদাহরণটি আবার ব্যবহার করতে):

postForm({'q':'a'}, 'http://example.com/');

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

নোট 2: কোডটি পুনঃনির্দেশ প্লাগইন থেকে নেওয়া হয়েছিল । আমি মূলত এটি আমার প্রয়োজনের জন্য সহজ করেছিলাম।


-1

পোস্ট বা জিইটি দিয়ে পুনর্নির্দেশের জন্য jQuery প্লাগইন:

https://github.com/mgalante/jquery.redirect/blob/master/jquery.redirect.js

পরীক্ষার জন্য উপরের .js ফাইলটি অন্তর্ভুক্ত করুন বা আপনার কোডটিতে শ্রেণিটি অনুলিপি / অনুলিপি করুন, তারপরে এখানে কোডটি ব্যবহার করুন, আপনার চলক নামগুলির সাথে "আরগস" প্রতিস্থাপন করুন এবং "মানগুলি" সেই সম্পর্কিত ভেরিয়েবলের মানগুলির সাথে প্রতিস্থাপন করুন:

$.redirect('demo.php', {'arg1': 'value1', 'arg2': 'value2'});

এটি এখানেও উল্লেখ করা হয়েছিল: stackoverflow.com/questions/8389646/…
ওজি শান

এই সমাধানটি এখনও আমাদের পক্ষে দুর্দান্ত চলছে, আপনি যদি এটি নিচে ভোট দিয়ে থাকেন তবে কেন তা সম্পর্কে একটি মন্তব্য করুন।
ওজি শান

-2

আপনি একটি এজেএক্স কল করতে পারেন (সম্ভবত কোনও লাইব্রেরি ব্যবহার করা যেমন প্রোটোটাইপ.জেএস বা জ্যাকুয়ারি ব্যবহার করে)। AJAX GET এবং POST উভয় বিকল্প পরিচালনা করতে পারে।


5
এক্সএমএলএইচটিপিআরকোয়েস্ট ব্যবহার করা ব্রাউজারটিকে অন্য কোনও পৃষ্ঠায় পরিচালিত করবে না।
জনি বুচানান
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.