Yêu cầu bài viết JavaScript như gửi biểu mẫu


1530

Tôi đang cố gắng hướng một trình duyệt đến một trang khác. Nếu tôi muốn một yêu cầu NHẬN, tôi có thể nói

document.location.href = 'http://example.com/q=a';

Nhưng tài nguyên tôi đang cố truy cập sẽ không phản hồi đúng trừ khi tôi sử dụng yêu cầu POST. Nếu điều này không được tạo động, tôi có thể sử dụng HTML

<form action="http://example.com/" method="POST">
  <input type="hidden" name="q" value="a">
</form>

Sau đó, tôi sẽ chỉ gửi biểu mẫu từ DOM.

Nhưng thực sự tôi muốn mã JavaScript cho phép tôi nói

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

Thực hiện trình duyệt chéo tốt nhất là gì?

Biên tập

Tôi xin lỗi tôi đã không rõ ràng. Tôi cần một giải pháp thay đổi vị trí của trình duyệt, giống như gửi biểu mẫu. Nếu điều này là có thể với XMLHttpRequest , thì điều đó không rõ ràng. Và điều này không nên không đồng bộ, cũng không sử dụng XML, vì vậy Ajax không phải là câu trả lời.


1
Như đã đề cập trong một chủ đề khác, có một plugin ".redirect" jquery hoạt động với phương thức POST hoặc GET. Nó tạo ra một hình thức với các đầu vào ẩn và gửi nó cho bạn. Ví dụ: $ .redirect ('demo.php', {'arg1': 'value1', 'arg2': 'value2'}); github.com/mgalante/jquery.redirect/blob/master/ từ
OG Sean

Câu trả lời:


2144

Tự động tạo <input>s trong một biểu mẫu và gửi nó

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

Thí dụ:

post('/contact/', {name: 'Johnny Bravo'});

EDIT : Vì điều này đã được nâng cấp rất nhiều, tôi đoán mọi người sẽ sao chép nó rất nhiều. Vì vậy, tôi đã thêm hasOwnPropertykiểm tra để sửa chữa bất kỳ lỗi vô ý.


10
Điều gì về mảng trong thông số dữ liệu? Jquery post () diễn giải ví dụ: "data: {mảng: [1, 2, 3]}" là? Mảng = 1 & mảng = 2 & mảng = 3. Whis code cho một kết quả khác.
Scit

18
Cảnh báo: Mặc dù có nhiều upvote, giải pháp này bị hạn chế và không xử lý các mảng hoặc các đối tượng lồng nhau bên trong một biểu mẫu. Nếu không, đó là một câu trả lời tuyệt vời.
emragins

3
thật ngạc nhiên khi điều này không được hỗ trợ bởi html hay javascript không phải jquery .. bạn phải viết mã này.
eugene

14
@mricci Điểm của đoạn trích này là chuyển hướng trình duyệt đến một URL mới được chỉ định bởi hành động; nếu bạn ở cùng một trang, bạn chỉ có thể sử dụng AJAX truyền thống để POST dữ liệu của mình. Vì trình duyệt sẽ được điều hướng đến một trang mới, nên nội dung của DOM hiện tại sẽ không thành vấn đề
Ken Bellows

6
Người dùng Python, Django và có lẽ Flask sẽ thấy lỗi này: "Bị cấm (403). Xác minh CSRF không thành công. Yêu cầu bị hủy bỏ.", Nếu tạo một biểu mẫu từ số không. Trong trường hợp này, bạn phải chuyển mã thông báo csrf theo cách này: post ('/ contact /', {name: 'Johnny Bravo', csrfmiddlewaretoken: $ ("# csrf_token"). Val ()});
Davidson Lima

129

Đây sẽ là một phiên bản của câu trả lời được chọn bằng 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
Đã sửa lỗi: hiện đang thêm vào tài
liệu.body

7
Hơi sửa đổi điều này để hỗ trợ các mảng và đối tượng gist.github.com/hom3chuk/692bf12fe7dac2486212
Ấn Độ

3
Nếu giá trị chứa ký tự xml dangeours, điều này sẽ không hoạt động trong ASP.NET encodeUriComponent (value). Sau đó, UrlDecode cũng được yêu cầu ở phía máy chủ.
Stefan Steiger

Nếu nhu cầu của bạn là đơn giản, thì chức năng này là không cần thiết. Điều này là đủ:$("<form method='POST' action='https://example.com'><input type='hidden' name='q' value='a'/></form>").appendTo("body").submit();
rinogo

71

Cách thực hiện đơn giản nhanh chóng và bẩn của câu trả lời @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();

Tất nhiên, bạn nên sử dụng khung JavaScript như Prototype hoặc jQuery ...


6
Có cách nào để làm điều này mà không cần có một trang web được tải trong cửa sổ / tab trình duyệt hiện tại không?
poustitenbach

54

Sử dụng createElementhàm được cung cấp trong câu trả lời này , điều này là cần thiết do sự cố của IE với thuộc tính name trên các thành phần được tạo bình thường với 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);
}

6
Bạn có cần phải loại bỏ đứa trẻ sau khi nộp? Không phải trang sẽ biến mất?
Nils

2
Không có cách nào để loại bỏ đứa trẻ sau khi gửi, ngoại trừ nếu một phiên được sử dụng và những dữ liệu đó được lưu.
Miloš

6
@CantucciHQ Trang có thể vẫn không thay đổi ngay cả khi mục tiêu biểu mẫu không được đặt. Không có 204 nội dung , ví dụ.
Eugene Ryabtsev

38

Câu trả lời của Rakesh Pai thật đáng kinh ngạc, nhưng có một vấn đề xảy ra với tôi (trong Safari ) khi tôi cố gắng đăng một biểu mẫu với một trường được gọi submit. Ví dụ , post_to_url("http://google.com/",{ submit: "submit" } );. Tôi đã vá các chức năng một chút để đi bộ xung quanh không gian biến đổi này.

    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!

7
2018 và vẫn không phải là một câu trả lời tốt hơn?
iiirxs

30

Không. Bạn không thể có yêu cầu bài viết JavaScript như gửi biểu mẫu.

Những gì bạn có thể có là một biểu mẫu trong HTML, sau đó gửi nó bằng JavaScript. (như đã giải thích nhiều lần trên trang này).

Bạn có thể tự tạo HTML, bạn không cần JavaScript để viết HTML. Điều đó sẽ là ngớ ngẩn nếu mọi người đề nghị rằng.

<form id="ninja" action="http://example.com/" method="POST">
  <input id="donaldduck" type="hidden" name="q" value="a">
</form>

Hàm của bạn sẽ chỉ cấu hình biểu mẫu theo cách bạn muốn.

function postToURL(a,b,c){
   document.getElementById("ninja").action     = a;
   document.getElementById("donaldduck").name  = b;
   document.getElementById("donaldduck").value = c;
   document.getElementById("ninja").submit();
}

Sau đó, sử dụng nó như thế nào.

postToURL("http://example.com/","q","a");

Nhưng tôi sẽ chỉ để lại chức năng và chỉ cần làm.

document.getElementById('donaldduck').value = "a";
document.getElementById("ninja").submit();

Cuối cùng, quyết định kiểu đi trong tệp ccs.

#ninja{ 
  display:none;
}

Cá nhân tôi nghĩ rằng các hình thức nên được giải quyết bằng tên nhưng điều đó không quan trọng ngay bây giờ.


26

Nếu bạn đã cài đặt Prototype , bạn có thể thắt chặt mã để tạo và gửi biểu mẫu ẩn như thế này:

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

25

đây là câu trả lời của rakesh, nhưng với sự hỗ trợ cho mảng (khá phổ biến trong các hình thức):

javascript đơn giản:

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

ồ, và đây là phiên bản jquery: (mã hơi khác, nhưng sôi sục với cùng một thứ)

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

3
Bây giờ tôi rất thích sử dụng chức năng đó nhưng thay vì gửi biểu mẫu ở cuối, tôi chỉ cần trả lại cho người gọi. bằng cách này tôi có thể dễ dàng thiết lập các thuộc tính bổ sung hoặc thực hiện các công cụ khác với nó nếu cần.
kritzikratzi

3
Tuyệt quá! rất hữu ích. Một thay đổi nhỏ cho những người dựa vào PHP ở phía máy chủ của biểu mẫu này, tôi đã thay đổi addField (key, params [key] [i]) thành addField (key + '[]', params [key] [i]). Điều này làm cho $ _POST [key] có sẵn dưới dạng mảng.
Thava

2
@Thava bạn cũng có thể đặt name = "bla []" trên trường nhập của mình. Dù sao, có những ngôn ngữ khác ngoài php không hỗ trợ cú pháp [] vì vậy tôi sẽ không thay đổi.
kritzikratzi

17

Một giải pháp là tạo biểu mẫu và gửi nó. Một thực hiện là

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

Vì vậy, tôi có thể triển khai bookmarklet rút ngắn URL một cách đơn giản

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

16

Chà, ước gì tôi đã đọc tất cả các bài viết khác để tôi không mất thời gian tạo ra bài này từ câu trả lời của Rakesh Pai. Đây là một giải pháp đệ quy hoạt động với mảng và đối tượng. Không phụ thuộc vào jQuery.

Đã thêm một phân đoạn để xử lý các trường hợp phải gửi toàn bộ biểu mẫu như một mảng. (ví dụ: nơi không có đối tượng trình bao quanh danh sách các mục)

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

1
Điều này dường như không mã hóa các đối tượng lồng nhau đúng cách.
mở

1
@mpen bạn có câu đố không?
emragins

1
Không xin lỗi. Nó đã đủ dễ dàng để viết bản thân mình; không đáng thời gian để gỡ lỗi.
mở

12

Ba lựa chọn ở đây.

  1. Câu trả lời JavaScript chuẩn: Sử dụng khung! Hầu hết các khung công tác Ajax sẽ tóm tắt cho bạn một cách dễ dàng để tạo một POST XMLHTTPRequest .

  2. Tự tạo yêu cầu XMLHTTPRequest, chuyển bài vào phương thức mở thay vì nhận. (Thêm thông tin trong việc sử dụng phương thức POST trong XMLHTTPRequest (Ajax) .)

  3. Thông qua JavaScript, tự động tạo một biểu mẫu, thêm một hành động, thêm các đầu vào của bạn và gửi nó.


5
XMLHTTPRequest không cập nhật cửa sổ. Bạn đang cố gắng nói rằng tôi nên kết thúc với AJAX bằng document.write (http.responseText)?
Joseph Holsten

11
Tại sao một người nên thêm 30k + vào dự án của anh ta nếu anh ta không làm gì khác với khung?
Mất trí nhớ

12

Tôi sẽ đi theo tuyến đường Ajax như những người khác đề xuất với một cái gì đó như:

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

1
Uncaught ReferenceError: QueryString không được xác định.
Chase Roberts

11

Cách dễ nhất là sử dụng Ajax Post Request:

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

Ở đâu:

  • dữ liệu là một đối tượng
  • dataType là dữ liệu được máy chủ mong đợi (xml, json, script, text, html)
  • url là địa chỉ của máy chủ RESt của bạn hoặc bất kỳ chức năng nào ở phía máy chủ chấp nhận HTTP-POST.

Sau đó, trong trình xử lý thành công chuyển hướng trình duyệt với một cái gì đó như window.location.


5
Bạn đã không đề cập rằng cách tiếp cận bạn cung cấp dựa trên thư viện jQuery JavaScript.
DavidRR

8
bạn cũng đã bỏ lỡ điểm của câu hỏi - anh ấy muốn 'hướng trình duyệt đến một trang khác', không đưa ra yêu cầu ajax.
Đen

Bạn có thể đợi câu trả lời và sau đó document.location = {url}; Nơi duy nhất tôi có thể tưởng tượng điều này sẽ không hoạt động nếu bạn đang chuyển hướng đến tải xuống tệp.
Epirocks

11

Đây là cách tôi viết nó bằng jQuery. Đã thử nghiệm trong Firefox và 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();
}

1
Đã làm cho tôi. Cảm ơn. (Đã thử nghiệm trong Chrome)
dannie.f

2
Tôi nghĩ vấn đề ở đây có thể là biểu mẫu bị xóa trước khi gửi lại. Tôi đã nghe nói rằng trong một số trình duyệt nếu bạn di chuyển hoặc xóa biểu mẫu trước khi quá trình gửi hoàn tất, trình xử lý sẽ không kích hoạt. Thay vào đó, hãy xóa biểu mẫu khỏi tài liệu trong trình xử lý.
Jeff DQ

Hoạt động như một lá bùa. Đã thử nghiệm trên Firefox + Chrome + IE11 - Cảm ơn bạn rất nhiều vì điều này!
Deunz

6

Các thử nghiệm thư viện bao gồm một đối tượng Hashtable, với một phương pháp ".toQueryString ()", cho phép bạn dễ dàng chuyển một đối tượng JavaScript / cấu trúc thành một chuỗi truy vấn-chuỗi phong cách. Vì bài đăng yêu cầu "phần thân" của yêu cầu phải là một chuỗi được định dạng chuỗi truy vấn, điều này cho phép yêu cầu Ajax của bạn hoạt động chính xác như một bài đăng. Đây là một ví dụ sử dụng 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();
};

1
Giải pháp này là một trong số ít giải pháp không thay thế tài liệu hiện được hiển thị bằng câu trả lời của máy chủ.
dothebart

4

Điều này hoạt động hoàn hảo trong trường hợp của tôi:

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

Bạn có thể sử dụng nó trong chức năng như:

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

Sử dụng điều này bạn có thể đăng tất cả các giá trị của đầu vào.


3

Tuy nhiên, một giải pháp đệ quy khác , vì một số khác dường như bị hỏng (tôi đã không kiểm tra tất cả chúng). Cái này phụ thuộc vào lodash 3.x và ES6 (không yêu cầu 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();
}

3

Giải pháp của tôi sẽ mã hóa các đối tượng lồng nhau sâu, không giống như giải pháp hiện được chấp nhận bởi @RakeshPai.

Nó sử dụng thư viện npm 'qs' và hàm chuỗi của nó để chuyển đổi các đối tượng lồng nhau thành các tham số.

Mã này hoạt động tốt với back-end Rails, mặc dù bạn sẽ có thể sửa đổi nó để hoạt động với bất kỳ phụ trợ nào bạn cần bằng cách sửa đổi các tùy chọn được truyền để xâu chuỗi. Rails yêu cầu mảngFormat được đặt thành "ngoặc".

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

Thí dụ:

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

Tạo các tham số Rails này:

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

2

FormObject là một tùy chọn. Nhưng FormObject hiện không được hỗ trợ bởi hầu hết các trình duyệt.


1

Điều này giống như tùy chọn 2 của Alan (ở trên). Làm thế nào để khởi tạo httpobj được để lại như một bài tập.

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

1

Điều này dựa trên mã của beauSD bằng jQuery. Nó được cải thiện để nó hoạt động đệ quy trên các đối tượng.

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

1

Bạn có thể tự động thêm biểu mẫu bằng cách sử dụng DHTML và sau đó gửi.



1

Tôi sử dụng java document.forms và lặp nó để lấy tất cả các phần tử trong biểu mẫu, sau đó gửi qua xhttp. Vì vậy, đây là giải pháp của tôi để gửi javascript / ajax (với tất cả html được bao gồm làm ví dụ):

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

1

Bạn có thể sử dụng phương thức kích hoạt của jQuery để gửi biểu mẫu, giống như bạn nhấn một nút, như vậy,

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

Nó sẽ gửi trên trình duyệt.


0

Phương pháp tôi sử dụng để đăng và hướng người dùng tự động sang một trang khác là chỉ cần viết một biểu mẫu ẩn và sau đó tự động gửi nó. Hãy yên tâm rằng các hình thức ẩn hoàn toàn không có không gian trên trang web. Mã sẽ giống như thế này:

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

Ứng dụng tự động gửi

Một ứng dụng gửi tự động sẽ hướng các giá trị biểu mẫu mà người dùng tự động đưa vào trang khác trở lại trang đó. Một ứng dụng như vậy sẽ như thế này:

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

0

Đây là cách tôi làm điều đó.

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

0

Không có giải pháp nào ở trên xử lý các thông số lồng nhau sâu chỉ bằng jQuery, vì vậy đây là giải pháp hai xu của tôi.

Nếu bạn đang sử dụng jQuery và bạn cần xử lý các tham số lồng nhau sâu, bạn có thể sử dụng chức năng này bên dưới:

    /**
     * Original code found here: https://github.com/mgalante/jquery.redirect/blob/master/jquery.redirect.js
     * I just simplified it for my own taste.
     */
    function postForm(parameters, url) {

        // generally we post the form with a blank action attribute
        if ('undefined' === typeof url) {
            url = '';
        }


        //----------------------------------------
        // SOME HELPER FUNCTIONS
        //----------------------------------------
        var getForm = function (url, values) {

            values = removeNulls(values);

            var form = $('<form>')
                .attr("method", 'POST')
                .attr("action", url);

            iterateValues(values, [], form, null);
            return form;
        };

        var removeNulls = function (values) {
            var propNames = Object.getOwnPropertyNames(values);
            for (var i = 0; i < propNames.length; i++) {
                var propName = propNames[i];
                if (values[propName] === null || values[propName] === undefined) {
                    delete values[propName];
                } else if (typeof values[propName] === 'object') {
                    values[propName] = removeNulls(values[propName]);
                } else if (values[propName].length < 1) {
                    delete values[propName];
                }
            }
            return values;
        };

        var iterateValues = function (values, parent, form, isArray) {
            var i, iterateParent = [];
            Object.keys(values).forEach(function (i) {
                if (typeof values[i] === "object") {
                    iterateParent = parent.slice();
                    iterateParent.push(i);
                    iterateValues(values[i], iterateParent, form, Array.isArray(values[i]));
                } else {
                    form.append(getInput(i, values[i], parent, isArray));
                }
            });
        };

        var getInput = function (name, value, parent, array) {
            var parentString;
            if (parent.length > 0) {
                parentString = parent[0];
                var i;
                for (i = 1; i < parent.length; i += 1) {
                    parentString += "[" + parent[i] + "]";
                }

                if (array) {
                    name = parentString + "[" + name + "]";
                } else {
                    name = parentString + "[" + name + "]";
                }
            }

            return $("<input>").attr("type", "hidden")
                .attr("name", name)
                .attr("value", value);
        };


        //----------------------------------------
        // NOW THE SYNOPSIS
        //----------------------------------------
        var generatedForm = getForm(url, parameters);

        $('body').append(generatedForm);
        generatedForm.submit();
        generatedForm.remove();
    }

Dưới đây là một ví dụ về cách sử dụng nó. Mã html:

<button id="testButton">Button</button>

<script>
    $(document).ready(function () {
        $("#testButton").click(function () {
            postForm({
                csrf_token: "abcd",
                rows: [
                    {
                        user_id: 1,
                        permission_group_id: 1
                    },
                    {
                        user_id: 1,
                        permission_group_id: 2
                    }
                ],
                object: {
                    apple: {
                        color: "red",
                        age: "23 days",
                        types: [
                            "golden",
                            "opal",
                        ]
                    }
                },
                the_null: null, // this will be dropped, like non-checked checkboxes are dropped
            });
        });
    });
</script>

Và nếu bạn nhấp vào nút kiểm tra, nó sẽ đăng mẫu và bạn sẽ nhận được các giá trị sau trong POST:

array(3) {
  ["csrf_token"] => string(4) "abcd"
  ["rows"] => array(2) {
    [0] => array(2) {
      ["user_id"] => string(1) "1"
      ["permission_group_id"] => string(1) "1"
    }
    [1] => array(2) {
      ["user_id"] => string(1) "1"
      ["permission_group_id"] => string(1) "2"
    }
  }
  ["object"] => array(1) {
    ["apple"] => array(3) {
      ["color"] => string(3) "red"
      ["age"] => string(7) "23 days"
      ["types"] => array(2) {
        [0] => string(6) "golden"
        [1] => string(4) "opal"
      }
    }
  }
}

Lưu ý: nếu bạn muốn đăng biểu mẫu lên một url khác ngoài trang hiện tại, bạn có thể chỉ định url làm đối số thứ hai của hàm postForm.

Vì vậy, ví dụ (để sử dụng lại ví dụ của bạn):

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

Hi vọng điêu nay co ich.

Note2: mã được lấy từ plugin chuyển hướng . Tôi về cơ bản chỉ đơn giản hóa nó cho nhu cầu của tôi.


-1

Plugin jQuery để chuyển hướng với POST hoặc GET:

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

Để kiểm tra, bao gồm tệp .js ở trên hoặc sao chép / dán lớp vào mã của bạn, sau đó sử dụng mã ở đây, thay thế "args" bằng tên biến của bạn và "giá trị" bằng các giá trị của các biến tương ứng đó:

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

Điều này cũng đã được đề cập ở đây: stackoverflow.com/questions/8389646/ Khăn
OG Sean

Giải pháp này vẫn đang hoạt động tốt đối với chúng tôi, nếu bạn bỏ phiếu cho nó, vui lòng để lại nhận xét về lý do.
OG Sean

-2

Bạn có thể thực hiện cuộc gọi AJAX (có thể sử dụng thư viện như sử dụng Prototype.js hoặc JQuery). AJAX có thể xử lý cả hai tùy chọn GET và POST.


5
Sử dụng XMLHttpRequest sẽ không hướng trình duyệt đến một trang khác.
Jonny Buchanan
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.