使用jQuery动态加载表单 - Dynamically loading form with jQuery

我正在学习网页设计，遇到了一个我自己无法解决的难题。我想动态加载一个表单到使用jQuery。我的代码是这样的:

从主文件中:

$('#left_colum').click(function(e) {
e.preventDefault();
   $('#column_left').load(create_album.php);
});

create_album.php ->它包含实际的表单，以及在POST上处理表单的php脚本。这是非常基本的。如果我自己加载my_form.php，它工作得很好。如果我像上面那样动态加载它;HTML可以工作，但是POST php脚本不能执行。

还有另一个有趣的行为;如果我点击动态加载的表单上的提交按钮，它就会消失(不像"正确"加载的表单)。

我已经看了很多帖子和教程，我还没能找到一个解决方案，而不是使用iframe。似乎人们通常不会动态加载除了基本的HTML以外的任何东西，这些东西不需要与服务器进行对话。I'm new to this: P

是否有解决方法或其他方法?谢谢!

编辑:

albums.php:

<?php
include 'init.php';
if(!logged_in()) {
    header("Location: index.php");
    exit();
}
?>
<h3>Albums</h3>
<?php
/*Output albums*/
$albums = get_albums();
if(empty($albums)) {
    echo("You don't have any albums");
} else {
    /*Changed: uploading images is now part of the albums sections*/
    foreach($albums as $album) {
        echo '<p><a class="album_view" id="'.$album['id'].'" href="">', $album['name'], '</a> (', $album['count'], ' images)<br/>Description: ', $album['description'], '...<br/><a class="album_edit" id="'.$album['id'].'" href="">Edit</a> / <a href="delete_album.php?album_id=', $album['id'], '">Delete</a> / <a class="upload_image" id="'.$album['id'].'" href="">Upload</a></p>';
    }
}
?>
<script type="text/javascript">
    $(document).ready(function() {
        /*Creating albums*/
        $('#create_album').click(function(e) {
            e.preventDefault();
            $('#column_left').load(album.php);
        });
    });

create_album.php:

<h3>Create Album</h3>
<?php
if(isset($_POST["album_name"], $_POST["album_description"])) {
    echo 'got here';
    $album_name = $_POST["album_name"];
    $album_description = $_POST["album_description"];
    $errors = array();
    if(empty($album_name) || empty($album_description)) {
        $errors[] = "Album name and description required";
    } else {
        if(strlen($album_name) > 55 || strlen($album_description) > 255) {
            $errors[] = "Name/description too long";
        }
    }
    if(!empty($errors)) {
        foreach($errors as $error) {
            echo $error, "<br/>";
        }
    } else {
        echo 'got here, too';
        //create_album($album_name, $album_description);
        //header("Location: albums.php");
    }
}
?>
<form action="" method="post">
    <p>Name:<br/><input type="text" name="album_name" maxlength="55"/></p>
    <p>Description:</br><textarea name="album_description" rows="6" cols="35" maxlength="255"></textarea></p>
    <p><input type="submit" value="Create"/></p>
</form>

我想那是:

$('#column_left').load('my_form.php');

对吧?

无论如何:

表单显示正确吗?
尝试使用firebug查看生成的源代码，以查看加载是否成功
确保"my_form.php"返回的html不是整个<html>，而是<form>及其内容
action是什么形式?它是不是一条绝对路径?如果它是相对的，那么当从ajax加载页面或从my_form.php
当你点击表单提交时，到底发生了什么?你在哪里被重定向?

因为你的表单动作将是一个不同的页面，所以每次你点击提交按钮，它会重定向到那个页面，你可以尝试使用iframe，它将以这种方式工作，或者如果你想使用jquery只粘贴一些你的代码，这样我们就可以了解实际发生了什么…虽然iframe对你来说是最好的解决方案，但现在

在您的代码中，您只加载表单的html部分。因此，当用户按下提交按钮时，您的字段已发送到原始页面，而不是"my_form.php"，我认为您管理POST数据。最简单的解决方案是使用IFRAME来加载表单代码。

您的表单动作缺失尝试这个，我已经尝试并在我的结束工作

album.php

<h3>Create Album</h3>
 <?php
if(isset($_POST["album_name"], $_POST["album_description"])) {
echo 'got here';
$album_name = $_POST["album_name"];
$album_description = $_POST["album_description"];
$errors = array();
if(empty($album_name) || empty($album_description)) {
    $errors[] = "Album name and description required";
} else {
    if(strlen($album_name) > 55 || strlen($album_description) > 255) {
        $errors[] = "Name/description too long";
    }
}
if(!empty($errors)) {
    foreach($errors as $error) {
        echo $error, "<br/>";
    }
} else {
    echo 'got here, too';
    //create_album($album_name, $album_description);
    //header("Location: albums.php");
}
     }
        ?>
     <form action="album.php" method="post">
<p>Name:<br/><input type="text" name="album_name" maxlength="55"/></p>
<p>Description:</br><textarea name="album_description" rows="6" cols="35 "maxlength="255"></textarea></p>
<p><input type="submit" value="Create"/></p>

yourmainfile.php

<!DOCTYPE html>  
      <html lang="en">  
       <head>  
<meta charset="utf-8">  
<title>Untitled</title>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
    $('#create_album').click(function(e) {
        e.preventDefault();
        $('#column_left').load('album.php');
    });
    });
</script>
      </head> 
        <body>
<div id="mainWrapper">
    <div id="column_left"></div><!-- end column left -->
    <a href="#" id="create_album"> Create New Album </a>
</div><!--end mainWrapper-->
        </body>
        </html>