在 jquery UI 中为我们选择一个表单并使用 ajax 提交它答案

【问题标题】：IN jquery UI tabs us a form and using ajax submit it在 jquery UI 中为我们选择一个表单并使用 ajax 提交它
【发布时间】：2011-01-01 15:37:12
【问题描述】：

我在我的页面中使用了一个 jquery UI 选项卡插件，并在其中一个选项卡中放置了一个表单。例如，该选项卡调用一个页面 form.php，该页面具有 html 的表单标签。现在 form.php 使用 ajax 和 jquery 来提交表单。这听起来可行吗。

    $(document).ready(function(){

    $("form#formdata").submit(function() {

            var str = $("#formdata").serialize();
            $.ajax({
            type: "POST",
            url: "submit.php",
            data: $("#formdata").serialize(),
            success: function(msg){
                     alert(msg);
                    }
    });

返回假； });

});

所以上面的代码出现在我的form.php中

表单被提交，但不是通过 ajax，而是被定向到 submit.php 我想在我的 UI 选项卡本身中反映结果。

请建议..谢谢

编辑：我放了 preventdefault() 并返回 false ，但它没有帮助..

【问题讨论】：

你似乎没有使用你的变量“str”
return false 和 preventDefault() 都会起作用，但前提是在无错误页面中正确使用。请记住，一旦出现第一个错误，javascript 就会停止运行。

标签： jquery forms user-interface plugins submit

【解决方案1】：

在ajax调用后将return false放入表单提交函数中。

【讨论】：

我尝试将 return false 设置为无效，但没有帮助..非常感谢您的快速回复..感谢..

【解决方案2】：

event.preventDefault() 是处理此问题的首选方法

$(document).ready(function() {
  $('form#formdata').submit(function(event) {
    event.preventDefault();
    var str = $('#formdata').serialize();
    $.ajax({
      type: 'POST',
      url:  'submit.php',
      data: $('#editmachine').serialize(),
      success: function(msg) { alert(msg); }
    });
  });
});

【讨论】：

嘿 CHEEKYSOGT，我尝试了你的建议，但它没有用..我在 $(document).ready(function()) 之后立即发出警报，但它没有执行..我该怎么做知道我的 jquery 是否正在执行。谢谢
请注意，您需要将参数传递给您声明为点击处理程序的匿名函数。请参阅我添加了“事件”参数。
如果您的 javascript 代码有任何错误，所有进一步的 javascript 都不会执行。确保打开 javascript 控制台以查看任何错误（Firefox 中的工具|错误控制台），或使用 Firebug 等工具密切监视正在发生的事情。

【解决方案3】：

您必须通过在提交事件中返回 false 来防止这种行为：

$(document).ready(function(){

    $("form#formdata").submit(function() {

            var str = $("#formdata").serialize();
            $.ajax({
            type: "POST",
            url: "submit.php",
            data: $("#editmachine").serialize(),
            success: function(msg){
                     alert(msg);
                    }
    });
return false;
    });

});

【讨论】：

【解决方案4】：

我终于让它工作了。

这就是我所做的。

在我的 UI 标签代码中

<div id="tabs">
            <ul>
                <li><a href="link.html">Link1</a></li>
                <li><a href="form.html">Data</a></li>
            </ul>
</div>

form.html 包含表单详细信息，从那里我使用了 ajax。

为了更正它，我在这样的 div 下的同一页面上使用了表单详细信息

<div id="tabs">
                <ul>
                    <li><a href="link.html">Link1</a></li>
                    <li><a href="#form">Data</a></li>
                </ul>

<div id = "form">
//form details here
</div>

    </div>

并在此页面上使用了 ajax jquery 代码。

感谢所有回答我问题的人，特别感谢@cheekysoft

希望这很方便和有用..

【讨论】：