0

我有一个主页,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>

这是我的 addpost.php:

<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>
4

1 回答 1

0

你没有.ajaxForm()正确使用。您不应该在单击处理程序中调用它,而是在初始化表单时调用它,并且它会建立自己的提交处理程序,该处理程序使用 AJAX 提交表单。

$(document).ready(function() {
    $("#f1").ajaxForm();
});

由于它使用 AJAX,因此不应重定向页面。如果要重定向到action表单的属性,请使用普通表单提交,而不是.ajaxForm().

于 2013-09-14T09:52:22.927 回答