使用jQuery传递POST数据时打开URL

Question

是否可以使用jQuery在将帖子数据传递到新页面时更改页面URL？

Answer 1

如果您想要更改当前页面URL,那么您可以<form>向当前页面添加新内容,向其添加隐藏的输入元素,然后提交它.

$('body').append($('<form/>')
  .attr({'action': yourNewURL, 'method': 'post', 'id': 'replacer'})
  .append($('<input/>')
    .attr({'type': 'hidden', 'name': 'param1', 'value': "hello"})
  )
  .append($('<input/>')
    .attr({'type': 'hidden', 'name': 'param2', 'value': "world"})
  )
).find('#replacer').submit();

或类似的东西

Answer 2

尝试以下功能。对我有用。JSON 兼容。

/**
 * Function that will redirect to a new page & pass data using submit
 * @param {type} path -> new url
 * @param {type} params -> JSON data to be posted
 * @param {type} method -> GET or POST
 * @returns {undefined} -> NA
 */
function gotoUrl(path, params, method) {
    //Null check
    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);

    //Fill the hidden form
    if (typeof params === 'string') {
        var hiddenField = document.createElement("input");
        hiddenField.setAttribute("type", "hidden");
        hiddenField.setAttribute("name", 'data');
        hiddenField.setAttribute("value", params);
        form.appendChild(hiddenField);
    }
    else {
        for (var key in params) {
            if (params.hasOwnProperty(key)) {
                var hiddenField = document.createElement("input");
                hiddenField.setAttribute("type", "hidden");
                hiddenField.setAttribute("name", key);
                if(typeof params[key] === 'object'){
                    hiddenField.setAttribute("value", JSON.stringify(params[key]));
                }
                else{
                    hiddenField.setAttribute("value", params[key]);
                }
                form.appendChild(hiddenField);
            }
        }
    }

    document.body.appendChild(form);
    form.submit();
}

演示使用

    <script>
        $('#GotoNextPage').on('submit', function(evt){
            evt.preventDefault();

            //Make the data
            var sampleData = new Object();
            sampleData.currentPage = 'We are here';
            sampleData.currentUid = 5;

            gotoUrl("actionPage.php", {'cmd':'nextPage', 'data':sampleData});
        });
    </script>

希望这可以帮助！