javascript - एक फॉर्म जमा करने की तरह जावास्क्रिप्ट पोस्ट अनुरोध




http post (18)

@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 साथ संभव है, तो यह स्पष्ट नहीं है। और यह असीमित नहीं होना चाहिए, न ही एक्सएमएल का उपयोग करना चाहिए, इसलिए अजाक्स जवाब नहीं है।


अजाक्स पोस्ट अनुरोध का उपयोग करने का सबसे आसान तरीका है:

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

कहा पे:

  • डेटा एक वस्तु है
  • डेटा टाइप सर्वर द्वारा अपेक्षित डेटा है (एक्सएमएल, जेसन, स्क्रिप्ट, टेक्स्ट, एचटीएमएल)
  • यूआरएल आपके आरईएसटी सर्वर का पता है या सर्वर पक्ष पर कोई भी फ़ंक्शन है जो HTTP-POST को स्वीकार करता है।

फिर सफलता हैंडलर में ब्राउज़र को ब्राउज़र की तरह कुछ पुनर्निर्देशित करें। स्थान।


आप एक AJAX कॉल कर सकते हैं (संभावित रूप से लाइब्रेरी का उपयोग कर जैसे प्रोटोटाइप.जेएस या JQuery)। AJAX दोनों GET और POST विकल्पों को संभाल सकता है।


आप डीएचटीएमएल का उपयोग करके फॉर्म को गतिशील रूप से जोड़ सकते हैं और फिर जमा कर सकते हैं।


एक समाधान फॉर्म उत्पन्न करना और जमा करना है। एक कार्यान्वयन है

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

इसलिए मैं एक यूआरएल शॉर्टिंग बुकमार्लेट को सरल के साथ कार्यान्वित कर सकता हूं

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

खैर, इच्छा है कि मैंने अन्य सभी पदों को पढ़ा था इसलिए मैंने राकेश पाई के जवाब से इसे बनाने में समय नहीं खोया। यहां एक पुनरावर्ती समाधान है जो सरणी और वस्तुओं के साथ काम करता है। 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();
};

फिर भी एक और पुनरावर्ती समाधान, क्योंकि कुछ अन्य तोड़ने लगते हैं (मैंने उन सभी का परीक्षण नहीं किया)। यह लॉनाश 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();
}

मैं document.forms जावा का उपयोग करता हूं और फॉर्म में सभी तत्व प्राप्त करने के लिए इसे लूप करता हूं, फिर xhttp के माध्यम से भेजता हूं। तो यह जावास्क्रिप्ट / AJAX सबमिट के लिए मेरा समाधान है (सभी एचटीएमएल एक उदाहरण के रूप में शामिल है):

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

यदि आपके पास 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();

यह 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 (ऊपर) की तरह है। Httpobj को तुरंत चालू करने के लिए एक व्यायाम के रूप में छोड़ दिया गया है।

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

यह राकेश का उत्तर है, लेकिन सरणी के लिए समर्थन के साथ (जो रूपों में काफी आम है):

सादा जावास्क्रिप्ट:

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

यहां बताया गया है कि मैंने इसे 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();
}

यहां मैं यह कैसे करता हूं।

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

राकेश पाई का जवाब अद्भुत है, लेकिन मेरे लिए एक समस्या है ( Safari ) जब मैं 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!

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

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

यह मेरे मामले में सही काम करता है।

आप इसे फ़ंक्शन में भी उपयोग कर सकते हैं,

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

इसका उपयोग करके आप इनपुट के सभी मूल्यों को पोस्ट कर सकते हैं।


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