我的 ajaxForm 重定向到 PHP 脚本答案

【问题标题】：My ajaxForm redirects to a PHP script我的 ajaxForm 重定向到 PHP 脚本
【发布时间】：2013-09-13 15:06:34
【问题描述】：

当我提交表单时，ajax 总是重定向到 some.php，如何在提交表单后阻止它重定向到 PHP 脚本，我希望页面重定向到 index.html

<html>
<head>
<meta charset="utf-8">
<title>jQuery Adapter &mdash; CKEditor Sample</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="../ckeditor.js"></script>
<script src="../adapters/jquery.js"></script>
<script src="jquery.form.js"></script>

<script>
    CKEDITOR.disableAutoInline = true;

    $( document ).ready( function() {
        $( '#editor1' ).ckeditor(); // Use CKEDITOR.replace() if element is <textarea>.
        $( '#editable' ).ckeditor(); // Use CKEDITOR.inline().
    } );

    function setValue() {
        $( '#editor1' ).val( $( 'input#val' ).val() );
    }
</script>
</head>

<body>
<form id="f1" action="some.php" method="post" enctype="multipart/form-data">
<table>
    <tr>
        <td>Title:</td>
        <td><input type="text" name="articletitle" id="articletitle" required/></td>
    </tr>
    <tr>
        <td>Featured Image:</td>
        <td><input name="MAX_FILE_SIZE" value="2097152" type="hidden">
        <input name="image" id="image" type="file" required/></td>
    </tr>
    <tr>
        <td colspan="3"><textarea cols="80" id="editor1" name="editor1" rows="10"></textarea></td>
    </tr>
    <tr>
        <td><input id="save" type="submit" value="Save"></td>
    </tr>
</table>
</form>

<script type="text/javascript">

$(document).ready(function(){
    $("#save").click(function(){
        $("#f1").ajaxForm();
    });
});
</script>
</body>
</html>

请帮我解决这个问题。

【问题讨论】：

这是因为提交按钮的默认行为是提交表单。您可以通过在单击处理程序中使用 preventDefault() 来防止这种情况。 jQuery Docs

标签： jquery html ajax

【解决方案1】：

<input type="submit"> 的默认行为是提交表单。

有两种方法可以解决此问题。第一个是简单地将您的input 设为button。这将阻止浏览器发送表单。

一个更好的方法是独立于 JavaScript 并使用@Jeemusu 所说的，使用preventDefault() 来防止提交发生。

【讨论】：

当我将输入更改为按钮时，表单中的数据不会插入到我的数据库中。
@FioderickVillapañe 这是一个不同的问题。您的问题适用于重定向，而不是数据库处理。

【解决方案2】：

试试这个：

$(document).ready(function(){
    $("#save").click(function(e){
        e.preventDefault();
        $("#f1").ajaxForm();
    });
});

它应该阻止您的输入执行其重定向页面的默认行为。

编辑：

要重定向到另一个页面，您应该使用以下内容：

window.location.href = 'http://www.google.com';

关于 ajax 的 Success 事件。

编辑 2：

试试这个小提琴：http://jsfiddle.net/4hF6e/3/ 确保你的引用是正确的。在我看来，AjaxForm 插件有一些方法可以防止按钮的默认行为。

【讨论】：

你的意思是它仍然重定向？
@FioderickVillapañe 你的函数 ajaxForm() 是做什么的？
@Jeemusu 它没有在数据库中插入数据
@rakeshjain 它将数据插入到数据库中，如您所见，我还有一张图片要上传到我的数据库中。
它仍然重定向吗？如果没有，这就是答案。您似乎有与 AJAX 相关的完全不同的问题。我建议在 Firebug/Chromes 开发人员工具的网络选项卡中查看您的 XHR 请求/响应，以查看您遇到的错误。如果您有更多问题，请提出一个新问题。

【解决方案3】：

试试

$("#save").click(function(e){
        e.preventDefault();
        $("#f1").ajaxForm();

});

或

$("#save").click(function(){
        $("#f1").ajaxForm();
        return false;
});

【讨论】：

使用第一个。始终使用第一个。

【解决方案4】：

你可以使用 type="submit" 而不是：

type="button"

或者你可以使用.preventDefault();:

$("#save").click(function(e){
    e.preventDefault();
    $("#f1").ajaxForm();

});

【讨论】：

别说，it doesn't work。这是一个毫无意义的评论。解释它是如何不起作用的。您问如何阻止您的表单重定向到另一个页面。这几乎肯定会阻止这种情况的发生。如果您想询问有关 AJAX 失败的问题，请提出一个新问题。

【解决方案5】：

或者您可以附加到表单的“onsubmit”事件。并在该函数中返回 false。即：

$('#f1').submit(function() {
  // do your ajax stuff... and when completed (success) redirect 
  // using document.location.href = 'index.html';
  return false;
});

【讨论】：