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




http post (19)

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

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

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

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

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

কিন্তু আমি যে কোনও সংস্থানটি অ্যাক্সেস করার চেষ্টা করছি সেটি সঠিকভাবে সাড়া দিবে না যদি না আমি POST অনুরোধটি ব্যবহার করি। যদি এটি গতিশীলভাবে উত্পন্ন না হয় তবে আমি HTML ব্যবহার করতে পারি

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

তারপর আমি শুধু ডম থেকে ফর্ম জমা দিতে হবে।

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

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

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

সম্পাদন করা

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


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

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

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

আমি কিভাবে 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();
}

এই 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();
}

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

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

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 সংস্করণ: (সামান্য ভিন্ন কোড, কিন্তু একই জিনিস নিচে boils)

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

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

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

এটি অ্যালানের বিকল্প ২ (উপরে) এর মতো। কিভাবে httpobj তাত্ক্ষণিকভাবে একটি ব্যায়াম হিসাবে বামে হয়।

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

তবুও অন্য একটি পুনরাবৃত্তি সমাধান, কিছু অন্যদের ভাঙ্গা বলে মনে হচ্ছে (আমি তাদের সব পরীক্ষা ছিল না)। এই এক লোডশ 3.x এবং ES6 উপর নির্ভর করে (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();
}

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

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

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

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

কোথায়:

  • তথ্য একটি বস্তু
  • ডাটা টাইপ সার্ভারের দ্বারা প্রত্যাশিত তথ্য (xml, json, script, text, html)
  • url আপনার REST সার্ভারের ঠিকানা বা সার্ভার পার্শ্ব যে কোনও ফাংশন HTTP-POST স্বীকার করে।

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


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

    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!

Prototype লাইব্রেরিতে একটি ".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();
};

আপনি ডায়নামিকভাবে DHTML ব্যবহার করে ফর্ম যুক্ত করতে পারেন এবং তারপর জমা দিতে পারেন।


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

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

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

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"]}]}

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

github.com/mgalante/jquery.redirect/blob/master/…

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

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

আপনি jQuery এবং তার $ । পোস্ট পদ্ধতির মতো লাইব্রেরি ব্যবহার করতে পারেন ।


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

          <!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>

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

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

স্বয়ংক্রিয় জমা আবেদন

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

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

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

    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            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();
}

উদাহরণ:

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

সম্পাদন করুন : যেহেতু এটি এতটা বেড়ে গেছে, আমি অনুমান করছি যে লোকেরা এই অনুলিপিটি অনুলিপি করবে। তাই আমি কোনও অবাঞ্ছিত বাগ সংশোধন করতে hasOwnProperty চেক যুক্ত করেছি।






html-form