Javascript 非 AJAX jQuery POST 请求

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/2054705/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-22 22:36:01  来源:igfitidea点击:

Non-AJAX jQuery POST request

javascriptjquery

提问by amit

I am trying to use the jQuery POST function but it is handling the request in AJAX style. I mean it's not actually going to the page I am telling it to go.

我正在尝试使用 jQuery POST 函数,但它以 AJAX 样式处理请求。我的意思是它实际上并没有进入我告诉它去的页面。

$("#see_comments").click(function() {
    $.post(
        "comments.php", 
        {aid: imgnum}, 
        function (data) {

        }
    );
});

This function should go to comments.phppage with the aid value in hand. It's posting fine but not redirecting to comments.php.

该函数应该使用手头的辅助值转到comments.php页面。它发布得很好,但没有重定向到comments.php



@Doug NeinerClarification:

@Doug Neiner澄清:

  1. I have 15 links (images). I click on a link and it loads my JavaScript. The script knows what imgnumI opened. This imgnumI want in the comments.php. I have to use this JavaScript and no other means can do the trick. The JavaScript is mandatory

  2. Your method successfully POSTs the aid value. But in the comments.phpwhen I try to echo that value, it displays nothing.

  3. I am using Firebug. In the Console, it shows the echo REQUEST I made in Step (2) successfully.

  1. 我有 15 个链接(图片)。我点击一个链接,它会加载我的 JavaScript。脚本知道imgnum我打开了什么。这是imgnum我想要在comments.php 中的。我必须使用这个 JavaScript,没有其​​他方法可以做到这一点。JavaScript 是强制性的

  2. 您的方法成功发布了辅助值。但是在comments.php 中,当我尝试回显该值时,它什么也没显示。

  3. 我正在使用萤火虫。在控制台中,它显示了我在步骤(2)中成功创建的 echo REQUEST。

回答by Doug Neiner

I know what you are trying to do, but its not what you want.

我知道你想做什么,但这不是你想要的。

First, unless you are changingdata on the server, don't use a POSTrequest. Just have #see_commentsbe a normal <a href='/comments.php?aid=1'>...

首先,除非您要更改服务器上的数据,否则不要使用POST请求。只要有#see_comments是正常的<a href='/comments.php?aid=1'>...

If you haveto use POST, then do this to get the page to follow your call:

如果您必须使用POST,请执行此操作以使页面跟随您的呼叫:

$("#see_comments").click(function() {
  $('<form action="comments.php" method="POST">' + 
    '<input type="hidden" name="aid" value="' + imgnum + '">' +
    '</form>').submit();
});

How this would actually work.

这将如何实际工作。

First $.postis onlyan AJAX method and cannot be used to do a traditional formsubmit like you are describing. So, to be able to post a value andnavigate to the new page, we need to simulate a formpost.

首先$.post只有一个AJAX方法,不能用来做一个传统的form提交像你所描述。因此,为了能够发布值导航到新页面,我们需要模拟form发布。

So the flow is as follows:

所以流程如下:

  1. You click on the image, and your JS code gets the imgnum
  2. Next, someone clicks on #see_comments
  3. We create a temporary formwith the imgnumvalue in it as a hidden field
  4. We submit that form, which posts the value andloads the comments.phppage
  5. Your comments.phppage will have access to the posted variable (i.e. in PHP it would be $_POST['aid'])
  1. 你点击图片,你的 JS 代码会得到 imgnum
  2. 接下来,有人点击 #see_comments
  3. 我们创建一个临时的,form其中的imgnum值作为隐藏字段
  4. 我们提交该表单,该表单发布值加载comments.php页面
  5. 您的comments.php页面将可以访问已发布的变量(即在 PHP 中它是$_POST['aid']

回答by devside

$("#see_comments").click(function () {
    $('<form action="comments.php" method="POST"/>')
        .append($('<input type="hidden" name="aid">').val(imgnum))
        .appendTo($(document.body)) //it has to be added somewhere into the <body>
        .submit();
});

回答by Mario Eduardo Castillo

While the solution by Doug Neiner is not only correct but also the most comprehensively explained one, it has one big problem: it seems to only work at Chrome.

虽然 Doug Neiner 的解决方案不仅正确而且解释最全面,但它有一个大问题:它似乎只适用于 Chrome。

I fidgeted around for a while trying to determine a workaround, and then stumbled upon the second answer by nopnop77. The only difference is the extra code appendTo($(document.body)). Then I tested it in firefoxand it worked like a charm. Apparently, Firefox and IE need to have the temporary form attached somewhere in the DOM Body.

我犹豫了一段时间试图确定解决方法,然后偶然发现了 nopnop77 的第二个答案。唯一的区别是额外的代码appendTo($(document.body))。然后我在Firefox 中对其进行了测试,它的效果非常好。显然,Firefox 和 IE 需要在 DOM Body 中的某处附加临时表单。

I had to do this implementation for a Symfony2 project, since the path generator inside the .twigtemplates would only work with GETparameters and messing with the query string was breaking havoc with the security of the app. (BTW, if anyone knows a way to get .twig templates to call pages with POST parameters, please let me know in the comments).

我必须为 Symfony2 项目执行此实现,因为.twig模板内的路径生成器只能处理GET参数,并且弄乱查询字符串会破坏应用程序的安全性。(顺便说一句,如果有人知道获取 .twig 模板以使用 POST 参数调用页面的方法,请在评论中告诉我)。

回答by helloandre

i think what you're asking is to get to 'comments.php' and posting aidwith value imgnum. The only way to do this is to submit this value with a form.

我想你要问的是进入 'comments.php' 并发布aidvalue imgnum。做到这一点的唯一方法是使用表单提交此值。

However, you can make this form hidden, and submit it on an arbitrary click somewhere with jquery.

但是,您可以隐藏此表单,然后使用 jquery 在某处任意单击提交。

html necessary (put anywhere on page):

html 必要的(放在页面上的任何地方):

<form id='see_comments_form' action='comments.php' action='POST'>
    <input id='see_comments_aid' type='hidden' name='aid' value=''>
</form>

js necessary:

js必备:

$("#see_comments").click(function(){
    $('#see_comments_aid').val(imgnum);
    $('#see_comments_form').submit();
);

this will redirect to 'comments.php' and send the proper value imgnum(that i assume you are getting from somewhere else).

这将重定向到“comments.php”并发送正确的值imgnum(我假设您是从其他地方获得的)。

回答by Veera

Actually, $.post()sends some data to the server. It does not cause any redirection unless you do it in your server side code which handles the POST request. I can suggest two solutions:

实际上,$.post()向服务器发送一些数据。它不会导致任何重定向,除非您在处理 POST 请求的服务器端代码中执行此操作。我可以建议两种解决方案:

  1. To go to comment page, instead of using JQuery post, you can simply use a 'anchor' tag - <a href="comments.php?aid=1">Show Comments</a>.
  2. Or if you are want to go through JQuery, you can use this code snippet: $(location).attr("href", "comments.php?aid=1");
  1. 要转到评论页面,而不是使用 JQuery 帖子,您可以简单地使用“锚”标签 - <a href="comments.php?aid=1">Show Comments</a>
  2. 或者,如果您想通过 JQuery,您可以使用以下代码片段: $(location).attr("href", "comments.php?aid=1");

回答by amit

didnt exactly solve the problem. but did manage to work around it. i had to do a lot modification to the JS to make this work, but the core problem of this question was solved by doing this:

没有完全解决问题。但确实设法解决了它。我不得不对 JS 做很多修改才能完成这项工作,但是通过这样做解决了这个问题的核心问题:

    $("#see_comments").attr({href: "comments.php?aid='"+imgnum+"'"});

this appended the aid value to the URL as @Doug Neiner initially suggested me to do. Thanks a lot Doug for all the effort. I really appreciate. +1 and accept to your answer for the effort.

正如@Doug Neiner 最初建议我做的那样,这将辅助值附加到 URL。非常感谢道格的所有努力。我真的很感激。+1 并接受您的努力答案。