javascript - получение - jquery отправка формы



Запрос на отправку JavaScript, как отправить форму (19)

Библиотека Prototype включает объект Hashtable с методом «.toQueryString ()», который позволяет легко превратить объект / структуру JavaScript в строку стиля строки запроса. Поскольку для сообщения требуется, чтобы «тело» запроса было строкой, отформатированной в строке запроса, это позволяет вашему запросу Ajax корректно работать в качестве сообщения. Вот пример использования Prototype:

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

https://ffff65535.com

Я пытаюсь направить браузер на другую страницу. Если бы я хотел получить запрос 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.

Но на самом деле мне бы хотелось, чтобы JavaScript-код позволял мне сказать

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

Какая лучшая реализация перекрестного браузера?

редактировать

Мне жаль, что я не был чист. Мне нужно решение, которое изменяет расположение браузера, так же как и отправку формы. Если это возможно с XMLHttpRequest , это не очевидно. И это не должно быть асинхронным и не использовать XML, поэтому Ajax не является ответом.


Вот как я написал его с помощью 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();
}

Вы можете динамически добавлять форму с помощью DHTML и затем отправлять.


Вы можете использовать библиотеку, такую ​​как jQuery и метод $ .post .


Если у вас установлен 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();

Еще одно рекурсивное решение, поскольку некоторые из других, похоже, сломаны (я не тестировал их все). Это зависит от 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();
}

Используя функцию createElement предоставленную в этом ответе , что необходимо из-за нестабильности IE с атрибутом name для элементов, созданных обычно с помощью 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);
}

Метод, который я использую, чтобы отправлять и направлять пользователя автоматически на другую страницу, - это просто написать скрытую форму, а затем автоматически отправить ее. Будьте уверены, что скрытая форма абсолютно не занимает места на веб-странице. Код будет примерно таким:

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

Нет, у вас не может быть запрос на отправку 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;
}

Лично я думаю, что формы должны решаться по имени, но это не важно прямо сейчас.


Одним из решений является создание формы и ее отправка. Одна из реализаций

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

Простая быстрая и грязная реализация ответа @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 ...


Самый простой способ - использовать 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.


Это будет версия выбранного ответа с помощью 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();
}

Это основано на коде 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();
}

Это прекрасно работает в моем случае:

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

Вы можете использовать его в функции:

function formSubmit() {
     document.getElementById("frmUserList").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");

это ответ rakesh, но с поддержкой массивов (что довольно часто встречается в формах):

простой javascript:

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

Ответ Ракеша Пая потрясающий, но есть проблема, которая возникает для меня (в 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!

 /**
 * 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