为什么我在提交表单时被重定向？ [复制]答案

【问题标题】：Why am I redirected when I submit form? [duplicate]为什么我在提交表单时被重定向？ [复制]
【发布时间】：2020-02-13 12:20:49
【问题描述】：

在此页面上，我正在尝试通过 JQuery 创建表单。我想使用 action="http://hebrew-transliteration.wz.cz/users/signup.php" 通过方法 .post() 发送数据，但我被重定向了。问题出在哪里，如何使用 JQuery AJAX 成功发布？

https://krestanske-clanky.webnode.cz/vip/

当我点击按钮发送时，我被重定向。

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
          $(document).ready(function(){
             if (jQuery) {  
               // jQuery is loaded  
              $form = $('<form id=current_sender action="http://hebrew-transliteration.wz.cz/users/signup.php" method=post></form>');
              $form.append('<h2>Registrovat ke psaní komentářů</h2>');
              $form.append('<label for="name1">Jméno či přezdívka: </label>');
              $form.append('<input name=name1 type=input maxlength=15  size=10>');
              $form.append('<label for=name2>&nbsp;&nbsp;Příjmení: </label>');
              $form.append('<input name=name2 type=input maxlength=20 size=10>');
              $form.append('<label for=email>&nbsp;Email:</label>');
              $form.append('<input name=email type=input maxlength=40  size=10 value=@>');
              $form.append('&nbsp;<input type=submit value=Send>');
              $('footer#footer').append($form);
             } else {
               alert("JQuery doesn't work");
             }
          });

$("#current_sender").submit(function(e) {
    e.preventDefault(); // avoid to execute the submit
    var form = $(this);
    var url = form.attr('action');
alert(url);
    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), // serializes form's elements.
           success: function(data) {
               alert(data); // show response
           }
         });
});
        </script>

【问题讨论】：

尝试将更改为。它将独立于表单 -> 将 eventListener 添加到此按钮
添加事件处理程序 ($("#current_sender").submit()) 的代码在外部 $(document).ready() 事件处理程序，所以首先它将事件绑定到所有匹配的表单（没有t any 所以这不起作用），然后文档准备就绪，然后将表单添加到文档中。
@Tracer69 不，<button> 默认也是一个提交按钮。你的意思是type="button"。

标签： jquery html ajax forms

【解决方案1】：

这是因为您在 $(document).ready() 回调之外添加了提交事件侦听器，这意味着回调没有正确绑定，因为表单元素可能在运行时丢失。

如果您将整个块移动到$(document).ready() 内，那么应该没问题：

$(document).ready(function(){
    // jQuery is loaded  
    $form = $('<form id=current_sender action="http://hebrew-transliteration.wz.cz/users/signup.php" method=post></form>');
    $form.append('<h2>Registrovat ke psaní komentářů</h2>');
    $form.append('<label for="name1">Jméno či přezdívka: </label>');
    $form.append('<input name=name1 type=input maxlength=15  size=10>');
    $form.append('<label for=name2>&nbsp;&nbsp;Příjmení: </label>');
    $form.append('<input name=name2 type=input maxlength=20 size=10>');
    $form.append('<label for=email>&nbsp;Email:</label>');
    $form.append('<input name=email type=input maxlength=40  size=10 value=@>');
    $form.append('&nbsp;<input type=submit value=Send>');
    $('footer#footer').append($form);

    // Add event listener after element is appended to DOM
    $("#current_sender").submit(function(e) {
        e.preventDefault(); // avoid to execute the submit
        var form = $(this);
        var url = form.attr('action');

        $.ajax({
            type: "POST",
            url: url,
            data: form.serialize(), // serializes form's elements.
            success: function(data) {
                alert(data); // show response
            }
        });
    });
});

【讨论】：

感谢您帮助解决了问题。