Ajax表单提交 [英] Ajax form submission

问题描述

我使用ajax提交html输入表单并在完成时重定向输出页面。我尝试了两种方法，但不知道为什么他们的结果不同。

HTML表单看起来像这样：

 < form id =output_postmethod =postaction =output.html> 
< table class =input>< / table> 
< / form> 
  

方法1：

  var frm = $（'＃output_post'）; 
 frm.submit（）
 $ .ajax（{
 type：frm.attr（'method'），
 url：frm.attr（'action'），
 success：function（url）{
 window.location =/output.html
} 
}）; 
  

方式2：

  var frm = $（'＃output_post'）; 
 $ .ajax（{
 type：POST，
 url：frm.attr（'action'），
 success：function（url）{
 window .location =/output.html
} 
 
}）; 
  

方法1按我的预期工作，但在方法2中收到错误消息 405方法不允许此方法不允许GET方法。方法1和2之间的区别是 frm.submit（），而我非常确定这两种方法已经成功开始计算。

任何人都可以在这个问题上给我一些提示吗？首先，我实际上会说 .submit（）。

解决方案<会更好地保留给浏览器，让它实际上继续执行到 action =的自然/缩进行为 - 如果你希望实际上有一个不同的'最终结果' - 这就是 $。submit（）

  / ** 
 * $ .submit将监听到
 * .submit事件，阻止
 *的默认值并允许我们模仿
 *提交过程并获得我们
 *定制的最终结果。 
 ** / 
 $（'＃output_post'）。submit（function（event）{
 event.preventDefault（）; 
 var getValues = $（this）.serialize ）; 
 $ .post（'yourScript.php'，getValues，function（）{
 window.location.href =/output.html; 
} 
}） ; 
  

问题提示

方法一

• 函数，在它允许执行脚本的其余部分之前，过早地将你从页面中发送出去，原生的 .submit（）会跟随到动作，这是缩进因此， $。ajax 从未跑过。

• 服务器可以/可以决定是否接受内容类型。


• 没有数据发送到 URL ，因此 - 默认为 GET （尽管类型： POST ）但是没有序列化。数组给定。


• 如果您在方法二中定义'data：values'，这可能会起作用。
  

I am using ajax to submit a html input form and to redirect the output page when it is done. I tried two approaches but not sure why their results are different.

HTML form is something looks like this:

<form id="output_post" method="post" action="output.html">
    <table class="input"></table>
</form>

Approach 1:

    var frm = $('#output_post');
    frm.submit()
    $.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        success: function (url) {
            window.location = "/output.html"
        }
    });

Approach 2:

    var frm = $('#output_post');
    $.ajax({
        type: "POST",
        url: frm.attr('action'),
        success: function(url) {
            window.location = "/output.html"
        }

    });

Approach 1 worked as I expected but I got error message in Approach 2 405 Method Not Allowed The method GET is not allowed for this resource. The difference between Approaches 1 and 2 is frm.submit(), and I am very sure both approaches have successfully initiate calculation.

Could anyone give me some hints on this issue? Thanks!

解决方案

Firstly, I would actually say .submit() would be better reserved for allowing the Browser to actually go ahead with the natural/indented behaviour of following through to the action="" - if you wanted to actually have a different 'end result' - that's where $.submit() comes into help.

/**
 *   $.submit will listen to
 *   the .submit event, preventing
 *   default and allowing us to mimic
 *   the submission process and have our
 *   bespoke end result.
**/
$('#output_post').submit(function(event) {
    event.preventDefault();
    var getValues = $(this).serialize();
    $.post( 'yourScript.php', getValues, function() {
        window.location.href = "/output.html";
    } 
});

Comments to the Question

Approach One

• This 'leaves' the function. Prematurely sending you away from the page before it's allowed to execute the rest of the script. The native .submit() will follow through to the action, which is the indented behaviour. Thus, $.ajax never ran.

Approach Two

• Servers could/can decide on it's accepted content types.
• No Data was sent to the URL, thus - defaulted to GET (Despite type: POST) But there's no serialised. array given.
• This may 'act' different if you define 'data: values' in Approach Two.

这篇关于Ajax表单提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！