javascript - لعرض - مشاريع جافا سكريبت




طلب مشاركة جافا سكريبت ، مثل إرسال نموذج (18)

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

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 تقصير bookmarklet مع بسيطة

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

أحاول توجيه متصفح إلى صفحة مختلفة. إذا كنت أرغب في طلب 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 ليس هو الحل.


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

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

أين:

  • البيانات هي كائن
  • dataType هي البيانات المتوقعة بواسطة الخادم (xml ، json ، script ، text ، html)
  • عنوان url هو عنوان خادم RESt الخاص بك أو أي وظيفة على جانب الخادم تقبل HTTP POST.

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


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

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

باستخدام الدالة 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);
}

تنفيذ بسيط وسريع من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();

بالطبع ، يجب عليك استخدام إطار JavaScript مثل Prototype أو jQuery ...


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

  1. إجابة جافا سكريبت القياسية: استخدم إطارًا! معظم أطر عمل Ajax XMLHttpRequest طريقة سهلة لعمل XMLHttpRequest POST.

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

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


حل آخر متكرر ، حيث يبدو أن البعض الآخر قد كسر (لم أختبر جميعهم). هذا يعتمد على lodash 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();
}

كنت أسير في طريق أجاكس كما اقترح آخرون بشيء مثل:

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

هذا سيكون نسخة من الاجابة المختارة باستخدام 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 كما excercise.

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

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

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

هنا كيف كتبتها باستخدام 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();
}

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



يمكنني استخدام document.forms java وتكرارها للحصول على جميع العناصر في النموذج ، ثم إرسال عبر xhttp. لذلك هذا هو الحل الخاص بي ل javascript / ajax submit (مع تضمين كل 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>

جواب Rakesh Pai مذهل ، ولكن هناك مشكلة تحدث لي (في 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!

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

تحرير : بما أن هذا قد حصلت على upvoted كثيرا ، وأنا أعتقد أن الناس سيتم لصق هذا الكثير. لذا أضفت الاختيار hasOwnProperty لإصلاح أي أخطاء غير مقصودة.





html-form