Question

我正在学习网页设计，遇到了一个我自己无法弄清楚的难题。我想动态地将表单加载到使用jQuery中。我的代码如下所示：

从主文件中：

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

create_album.php - ＆gt;它包含实际的表单，以及在POST上处理它的php脚本。这是非常基本的。如果我自己加载my_form.php，它可以正常工作。如果我按上面动态加载它; HTML工作但POST php脚本不会执行。

还有另一个有趣的行为;如果我单击动态加载表单上的提交按钮，它将全部消失（与“正确”加载的表单不同）。

我经历了很多帖子和教程，除了使用iframe之外我还没有找到解决方案。似乎人们通常不会动态加载除基本HTML之外的其他任何不需要与服务器对话的内容。我是新手：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>

Answer 1

我认为是：

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

正确？

反正：

表格是否正确显示？
尝试使用firebug查看生成的源，以查看加载是否成功
确保“my_form.php”返回的html不是整个<html>，而只是<form>及其内容
action的形式是什么？它是绝对的路径吗？如果它是相对的，则从ajax加载页面或my_form.php
您是在提交表单vja ajax还是“标准方式”？
点击表单提交时会发生什么？你在哪里被重定向？

Answer 2

因为您的表单操作会转到另一个页面，因此每次单击“提交”按钮时，它会将您重定向到该页面，您可以尝试使用iframe它将以这种方式工作，或者如果您只想使用jquery而不是粘贴一些代码，以便我们可以理解实际发生的事情......虽然iframe是最好的解决方案，就像现在一样

Answer 3

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

Answer 4

您的表单操作缺失尝试此操作，我已经尝试并在我的最终工作

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>

使用jQuery动态加载表单

4 个答案: