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




http post (21)

यह एलन के विकल्प 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);

मैं एक ब्राउज़र को एक अलग पृष्ठ पर निर्देशित करने की कोशिश कर रहा हूं। अगर मैं एक जीईटी अनुरोध चाहता था, तो मैं कह सकता हूं

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


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

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

कहा पे:

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

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


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

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

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

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

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

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


नहीं, आपके पास फॉर्म भरने की तरह जावास्क्रिप्ट पोस्ट अनुरोध नहीं हो सकता है।

एचटीएमएल में आपके पास क्या हो सकता है, फिर इसे जावास्क्रिप्ट से सबमिट करें। (जैसा कि इस पृष्ठ पर कई बार बताया गया है)

आप स्वयं HTML बना सकते हैं, आपको HTML लिखने के लिए जावास्क्रिप्ट की आवश्यकता नहीं है। अगर लोगों ने सुझाव दिया तो वह मूर्खतापूर्ण होगा।

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

व्यक्तिगत रूप से मुझे लगता है कि फॉर्म को नाम से संबोधित किया जाना चाहिए लेकिन यह अभी महत्वपूर्ण नहीं है।


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

FormData एक विकल्प है। लेकिन FormObject अब अधिकांश ब्राउज़रों द्वारा समर्थित नहीं है।


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 चेक जोड़ा।


आप jQuery और इसकी $ .post विधि जैसी लाइब्रेरी का उपयोग कर सकते हैं।


मैं 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>

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

यहां तीन विकल्प हैं।

  1. मानक जावास्क्रिप्ट उत्तर: एक ढांचे का प्रयोग करें! अधिकांश अजाक्स ढांचे ने आपको XMLHttpRequest POST बनाने का एक आसान तरीका XMLHttpRequest

  2. XMLHTTPRequest स्वयं को अनुरोध करें, प्राप्त करने के बजाय खुली विधि में पोस्ट पास करें। ( XMLHTTPRequest (अजाक्स) में POST विधि का उपयोग करने में अधिक जानकारी।)

  3. जावास्क्रिप्ट के माध्यम से, गतिशील रूप से एक फॉर्म बनाएं, एक क्रिया जोड़ें, अपना इनपुट जोड़ें, और सबमिट करें।


मैं अजाक्स मार्ग से नीचे जाऊंगा क्योंकि दूसरों ने कुछ ऐसा सुझाव दिया था:

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

@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 जैसे जावास्क्रिप्ट ढांचे का उपयोग करना चाहिए ...


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


उपयोगकर्ता को स्वचालित रूप से किसी अन्य पृष्ठ पर पोस्ट करने और निर्देशित करने के लिए उपयोग की जाने वाली विधि केवल एक छिपी हुई फॉर्म लिखना है और फिर ऑटो सबमिट करना है। आश्वस्त रहें कि छिपे हुए फॉर्म को वेब पेज पर बिल्कुल कोई जगह नहीं है। कोड इस तरह कुछ होगा:

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

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

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

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

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

इस उत्तर में प्रदान किए गए createElement फ़ंक्शन का उपयोग करना, जो IE के createElement कारण आवश्यक है, document.createElement साथ सामान्य रूप से बनाए गए तत्वों पर नाम विशेषता के साथ 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);
}




html-form