标签云

微信群

扫码加入我们

WeChat QR Code

I'm trying to direct a browser to a different page. If I wanted a GET request, I might saydocument.location.href = 'http://example.com/q=a';But the resource I'm trying to access won't respond properly unless I use a POST request. If this were not dynamically generated, I might use the HTML<form action="http://example.com/" method="POST"><input type="hidden" name="q" value="a"></form>Then I would just submit the form from the DOM.But really I would like JavaScript code that allows me to saypost_to_url('http://example.com/', {'q':'a'});What's the best cross browser implementation?Edit I'm sorry I was not clear. I need a solution that changes the location of the browser, just like submitting a form. If this is possible with XMLHttpRequest, it is not obvious. And this should not be asynchronous, nor use XML, so Ajax is not the answer.


As mentioned in another thread there is a jquery ".redirect" plugin that works with the POST or GET method. It creates a form with hidden inputs and submits it for you. Ex: $.redirect('demo.php', {'arg1': 'value1', 'arg2': 'value2'});github.com/mgalante/jquery.redirect/blob/master/…

2019年08月26日36分53秒

What about arrays in data params? Jquery post() interprets e.g.: "data: {array: [1, 2, 3]}" as ?array=1&array=2&array=3. Whis code gives another result.

2019年08月27日36分53秒

Warning: Despite the many upvotes, this solution is limited and does not handle arrays or nested objects inside of a form.Otherwise it's a great answer.

2019年08月26日36分53秒

mricci The point of this snippet is to redirect the browser to a new URL specified by the action; if you're staying on the same page you can just use traditional AJAX to POST your data. Since the browser should be navigating to a new page, the current page's DOM's contents won't matter

2019年08月26日36分53秒

Note this is probably outdated. We can use FormData to achieve this using pure javascript.

2019年08月26日36分53秒

stevemao Using FormData one still needs to send the data using XMLHttpRequest, which as stated in the above comments, is not able show the result in browser window.

2019年08月27日36分53秒

Fixed: now appending to document.body

2019年08月26日36分53秒

Slightly modified this to support arrays and objects gist.github.com/hom3chuk/692bf12fe7dac2486212

2019年08月26日36分53秒

If value contains a dangeours xml character, this won't work in ASP.NET encodeUriComponent(value) is required. Then, UrlDecode is also required on the server-side.

2019年08月27日36分53秒

If your needs are simple, then this function is unnecessary. This one-liner is sufficient: $("<form method='POST' action='https://example.com'><input type='hidden' name='q' value='a'/></form>").appendTo("body").submit();

2019年08月27日36分53秒

Is there a way to do this without there being a web page loaded in the current browser window/tab?

2019年08月27日36分53秒

yes use the attribute target='_blank' in the form element

2019年08月26日36分53秒

Do you need to remove the child after submission?Doesn't the page go away anyway?

2019年08月27日36分53秒

There is no use to remove the child after submission, except if a session is used and those data are saved.

2019年08月26日36分53秒

CantucciHQ The page might just as well stay unchanged even if form target is not set. There is 204 No Content, for example.

2019年08月27日36分53秒

2018 and still not a better answer?

1970年01月01日00分08秒

p.s. i now enjoy using that function but instead of submitting the form at the end i simply return it back to the caller. this way i can easily set additional attributes or do other stuff with it if needed.

2019年08月26日36分53秒

Great! very useful. A small change for people who rely on PHP at server side of this form, I changed addField( key, params[key][i] ) to addField(key +'[]', params[key][i]). This makes the $_POST[key] available as array.

2019年08月26日36分53秒

Thava you could also set name="bla[]" on your input field. anyways, there are languages other than php that don't support the [] syntax so i'm leaving this unchanged.

2019年08月27日36分53秒

for me it even worked without adding the form to the dom..

2019年08月26日36分53秒

This doesn't seem to encode nested objects properly either.

2019年08月27日36分53秒

mpen do you have a fiddle?

2019年08月26日36分53秒

No, sorry. It was easy enough to write myself; not worth the time to debug.

2019年08月26日36分53秒

XMLHTTPRequest doesn't update the window. Are you trying to say I should end with the AJAX with a document.write(http.responseText)?

2019年08月26日36分53秒

Why should one add 30k+ to he's project if he dosent do anything else with the framework ?

2019年08月26日36分53秒

Uncaught ReferenceError: QueryString is not defined.

2019年08月26日36分53秒

Patch to Katy's source: pastebin.com/Fi23YzVF

2019年08月26日36分53秒

Looks good, but didn't work for me.

2019年08月26日36分53秒

Worked for me. Thanks. (Tested in Chrome)

2019年08月26日36分53秒

I think the problem here might be that the form is removed before the submission returns.I've heard that in some browsers if you move or remove the form before the submit completes, the handlers won't fire.Instead, remove the form from the document in the handler.

2019年08月26日36分53秒

Works like a charm. Tested on Firefox + Chrome + IE11 - Thank you very much for this !

2019年08月26日36分53秒

You didn't mention that the approach you offer is based on the jQuery JavaScript library.

2019年08月26日36分53秒

you've also missed the point of the question - he wants to 'direct a browser to a different page', not make an ajax request.

2019年08月26日36分53秒

You could wait for the reply and then document.location={url}; Only place I can imagine this wouldn't work is if you are redirecting to a file download.

2019年08月26日36分53秒

This solution is one of the few that doesn't replace the currently displayed document by the return of the server answer.

2019年08月27日36分53秒

Note that $.post is AJAX only.

2019年08月26日36分53秒

This was also mentioned here:stackoverflow.com/questions/8389646/…

2019年08月27日36分53秒

Using XMLHttpRequest wouldn't direct the browser to another page.

2019年08月26日36分53秒