我有一个主页，在我的主页内index.html我有一个div，当我在该div中加载addpost.php时，我加载了所有其他页面。
我使用页面重定向.ajaxForm()提交它的表单，但是当我直接在地址栏中打开addpost.php时，它不会重定向我想要实现的目标。
这是我的主页：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sugar and Spice</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>
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="other.css"/>
</head>
<body style= "background-image:url('bg.jpg');">
<!-- Navbar
================================================== -->
<div class="navbar navbar-inverse ">
<center><img src="banner.jpg"></center>
<div class="navbar-inner" style= "background-image:url('images.jpg');">
<a class="brand" href="#"><img src="logo.png" width="20" height="20"></img></a>
<div class="container">
<div class="nav-collapse collapse">
<ul class="nav">
<li class="">
<a href="#" class="home">Home</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<div class="nav-collapse collapse side">
<ul class="nav nav-stacked">
<li class="">
<a href="#" class="post">Post</a>
</li>
<li class="">
<a href="#" class="page">Page</a>
</li>
</ul>
</div>
</div>
<div class="span10 well">
<div class="span10">
<!--Contect goes here-->
</div>
</div>
</div>
<!-- Footer
================================================== -->
<footer class="footerwell">
<div class="footercolor">
<div class="container">
<p class="pull-right"></a></p>
<p></p>
</div>
</div>
</footer>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
<script src="assets/js/bootstrap-affix.js"></script>
<script src="assets/js/application.js"></script>
<script src="jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
//$(".span10").load("home.php");
$(".home").click(function(){
$(".span10").load("addpost.php");
});//close home click
$(".post").click(function(){
$(".span10").load("post.php");
});//close post click
$(".page").click(function(){
$(".span10").load("page.php");
});//close post click
}); //close ready
</script>
</body>
</html>
这是我的补充.php：
<html>
<head>
<meta charset="utf-8">
<title>jQuery Adapter — 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>
您没有正确使用.ajaxForm()。您不应该在单击处理程序中调用它，而是在初始化窗体时调用它，它会建立自己的提交处理程序，该处理程序使用 AJAX 提交窗体。
$(document).ready(function() {
$("#f1").ajaxForm();
});
由于它使用 AJAX，因此不应重定向页面。如果要重定向到表单的 action 属性，请使用普通表单提交，而不是.ajaxForm() 。