使用 jQuery 动态加载表单答案

【问题标题】：Dynamically loading form with jQuery使用 jQuery 动态加载表单
【发布时间】：2012-01-23 03:59:19
【问题描述】：

我正在学习网页设计，遇到了一个我自己无法解决的难题。我想将表单动态加载到使用 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 之外的任何内容，而不必与服务器对话。我是新手：P

是否有解决方法或其他方法？谢谢！

编辑：

相册.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>

【问题讨论】：

动态加载表单到_____？
你能发布一些你正在使用的标记
JQuery.load 只是加载文件并填充选择器。它不执行 PHP。您需要使用不同的机制。
好的，我已经上传了源代码。我已经删掉了很多内容以尽量减少短信墙

标签： php jquery html ajax dynamic

【解决方案1】：

我认为是：

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

对吗？

无论如何：

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

【讨论】：

表单正确显示，只有对象被加载（没有其他 HTML，如、等...）表单操作是“ ”。提交不会重定向，它只会清除整个框架（它会消失）。通过 POST 提交（我认为是 ajax）
<frame>?为什么要通过 ajax 加载帧？另外，如果操作是“”，浏览器会将 POST 提交到显示表单的页面的同一路径，而不是 my_form.php，就像从 my_form.php 提交表单时所做的那样...

【解决方案2】：

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

【讨论】：

好的，谢谢，我已经粘贴了代码。我想避免 iframe，但如果没有其他合理的方法，我会这样做。动作是“”；这是一种“发布”方法。

【解决方案3】：

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

【讨论】：

【解决方案4】：

您的表单操作丢失试试这个，我已经尝试并正在努力

专辑.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>

你的主文件.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>

【讨论】：

这行得通：D 当我像你描述的那样更改动作参数时，POST 将在该位置执行变量 - 只需将 php 脚本移动到它自己的文件中。非常感谢！