طلب نشر جافا سكريبت مثل إرسال النموذج

Question

أحاول توجيه المتصفح إلى صفحة مختلفة.إذا أردت الحصول على طلب GET، قد أقول

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>

ثم أود فقط إرسال النموذج من DOM.

لكن في الحقيقة أود الحصول على كود جافا سكريبت الذي يسمح لي بالقول

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

ما هو أفضل تطبيق عبر المتصفح؟

يحرر

أنا آسف لأنني لم أكن واضحا.أحتاج إلى حل يغير موقع المتصفح، تمامًا مثل إرسال النموذج.إذا كان هذا ممكنا مع XMLHttpRequest, ، ليس واضحا.وهذا لا ينبغي أن يكون غير متزامن، ولا يستخدم XML، لذا فإن Ajax ليس هو الحل.

Answer 1

إنشاء ديناميكيا <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 تحقق لإصلاح أي أخطاء غير مقصودة.

Answer 2

ستكون هذه نسخة من الإجابة المحددة باستخدام مسج.

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

Answer 3

تنفيذ بسيط وسريع وقذر لإجابة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();

بالطبع، يجب عليك بدلاً من ذلك استخدام إطار عمل جافا سكريبت مثل النموذج المبدئي أو مسج...

Answer 4

باستخدام createElement الوظيفة المقدمة في هذه الإجابة, ، وهو أمر ضروري بسبب تعطل IE مع سمة الاسم على العناصر التي تم إنشاؤها بشكل طبيعي مع 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);
}

Answer 5

إجابة راكيش باي أمر مذهل، ولكن هناك مشكلة تحدث لي (في سفاري) عندما أحاول نشر نموذج بحقل يسمى 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!

Answer 6

لا.لا يمكنك الحصول على طلب نشر JavaScript مثل إرسال النموذج.

ما يمكنك الحصول عليه هو نموذج بتنسيق HTML، ثم إرساله باستخدام JavaScript.(كما هو موضح عدة مرات في هذه الصفحة).

يمكنك إنشاء HTML بنفسك، ولا تحتاج إلى JavaScript لكتابة 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();

وأخيرًا، يتم تحديد النمط في ملف ccs.

#ninja{ 
  display:none;
}

أنا شخصياً أعتقد أنه يجب معالجة النماذج بالاسم ولكن هذا ليس مهمًا في الوقت الحالي.

Answer 7

اذا كنت تمتلك النموذج المبدئي بعد تثبيته، يمكنك تشديد التعليمات البرمجية لإنشاء النموذج المخفي وإرساله مثل هذا:

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

Answer 8

هذه هي إجابة rakesh، ولكن مع دعم المصفوفات (وهو أمر شائع جدًا في النماذج):

جافا سكريبت عادي:

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

أوه، وهنا نسخة مسج:(رمز مختلف قليلاً، ولكنه يتلخص في نفس الشيء)

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

Answer 9

أحد الحلول هو إنشاء النموذج وإرساله.تنفيذ واحد هو

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

Answer 10

حسنًا، أتمنى لو كنت قد قرأت جميع المشاركات الأخرى حتى لا أضيع الوقت في إنشاء هذا من إجابة راكيش باي.إليك حلًا عوديًا يعمل مع المصفوفات والكائنات.لا يوجد اعتماد على 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();
};

Answer 11

ثلاثة خيارات هنا.

1. إجابة جافا سكريبت القياسية:استخدام الإطار!ستوفر لك معظم أطر عمل Ajax طريقة سهلة لإنشاء طلب XMLHTTP بريد.

2. قم بإجراء طلب XMLHTTPRequest بنفسك، وقم بتمرير النشر إلى الطريقة open بدلاً من get.(مزيد من المعلومات في استخدام طريقة POST في XMLHTTPRequest (Ajax).)

3. عبر JavaScript، يمكنك إنشاء نموذج ديناميكيًا وإضافة إجراء وإضافة مدخلاتك وإرساله.

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

Answer 13

إليك كيف كتبته باستخدام jQuery.تم اختباره في Firefox وInternet Explorer.

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

Answer 14

أسهل طريقة هي استخدام Ajax Post Request:

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

أين:

• البيانات هي كائن
• نوع البيانات هي البيانات المتوقعة بواسطة الخادم (XML ، JSON ، نص النصي ، النص ، HTML)
• عنوان url هو عنوان خادم RSt الخاص بك أو أي وظيفة على جانب الخادم تقبل HTTP-POST.

ثم في معالج النجاح، قم بإعادة توجيه المتصفح بشيء مثل window.location.

Answer 15

ال النموذج المبدئي تتضمن المكتبة كائن Hashtable، باستخدام طريقة ".toQueryString()"، والتي تتيح لك بسهولة تحويل كائن/بنية JavaScript إلى سلسلة نمط سلسلة استعلام.نظرًا لأن المنشور يتطلب أن يكون "نص" الطلب عبارة عن سلسلة منسقة بسلسلة استعلام، فإن هذا يسمح لطلب Ajax الخاص بك بالعمل بشكل صحيح كمنشور.فيما يلي مثال باستخدام النموذج الأولي:

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

Answer 16

هذا يعمل بشكل مثالي في حالتي:

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

يمكنك استخدامه في وظيفة مثل:

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

باستخدام هذا يمكنك نشر كافة قيم المدخلات.

Answer 17

كائن النموذج هو خيار.لكن FormObject غير مدعوم من قبل معظم المتصفحات الآن.

Answer 18

بعد آخر العودية الحل، حيث يبدو أن البعض الآخر معطل (لم أختبرهم جميعًا).هذا يعتمد عليه لوداش 3.x وES6 (مسج غير مطلوب):

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

Answer 19

سيقوم الحل الخاص بي بتشفير الكائنات المتداخلة بعمق، على عكس الحل المقبول حاليًا بواسطة @RakeshPai.

يستخدم مكتبة npm 'qs' ووظيفتها stringify لتحويل الكائنات المتداخلة إلى معلمات.

تعمل هذه التعليمات البرمجية بشكل جيد مع الواجهة الخلفية لـ Rails، على الرغم من أنه يجب أن تكون قادرًا على تعديلها للعمل مع أي واجهة خلفية تحتاجها عن طريق تعديل الخيارات التي تم تمريرها إلى stringify.يتطلب ريلز تعيين تنسيق المصفوفة على "أقواس".

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

ينتج معلمات Rails هذه:

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

Answer 20

هذا مثل خيار آلان 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);

Answer 21

يعتمد هذا على كود beauSD باستخدام jQuery.لقد تم تحسينه بحيث يعمل بشكل متكرر على الكائنات.

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

Answer 22

يمكنك إضافة النموذج ديناميكيًا باستخدام DHTML ثم إرساله.

Answer 23

يمكنك استخدام مكتبة مثل jQuery و طريقة $.post.

Answer 24

أستخدم document.forms Java وأقوم بتكراره للحصول على جميع العناصر الموجودة في النموذج، ثم أرسله عبر xhttp.إذن هذا هو الحل الخاص بي لإرسال JavaScript/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>

Answer 25

الطريقة التي أستخدمها لنشر المستخدم وتوجيهه تلقائيًا إلى صفحة أخرى هي كتابة نموذج مخفي ثم إرساله تلقائيًا.تأكد من أن النموذج المخفي لا يشغل أي مساحة على صفحة الويب.سيكون الرمز شيئًا مثل هذا:

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

Answer 26

هنا كيف أفعل ذلك.

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

Answer 27

البرنامج المساعد jQuery لإعادة التوجيه باستخدام POST أو GET:

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

للاختبار، قم بتضمين ملف .js أعلاه أو انسخ/الصق الفئة في الكود الخاص بك، ثم استخدم الكود هنا، مع استبدال "args" بأسماء المتغيرات الخاصة بك، و"values" بقيم تلك المتغيرات المعنية:

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

Answer 28

يمكنك تشغيل طريقة jQuery لإرسال النموذج، تمامًا كما تضغط على زر، هكذا،

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

سيتم تقديمه على المتصفح.

Answer 29

يمكنك إجراء مكالمة AJAX (على الأرجح باستخدام مكتبة مثل استخدام Prototype.js أو JQuery).يمكن لـ AJAX التعامل مع خيارات GET وPOST.