用jQuery動態加載表單

我在學習網頁設計，遇到了一個我自己弄不明白的難題。我想動態地將表單加載到使用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之外的任何內容，而無需與服務器通話。我是新來的：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>

來源

2011-12-18 akkiya

動態加載形成一個_____？ – 2011-12-18 19:41:43

你可以發佈一些你正在使用的標記嗎 – Rafay 2011-12-18 19:42:14

JQuery.load只是加載文件並填充選擇器。它不執行PHP。你需要使用不同的機制。 – lucifurious 2011-12-18 19:46:51

我想這就是：

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

對不對？

不管怎麼說：

的形式顯示錯誤？
嘗試在看看生成的源，通過使用螢火蟲，以查看是否加載成功
確保「my_form.php」返回的HTML是不是整個<html>只是<form>及其內容
什麼是action？這是一條絕對的路嗎？如果它是相對的，當它從ajax載入頁面或從my_form.php
調用時，它可能指向不同的位置。您是否提交表單vja ajax或「標準方式」？
當你點擊表單提交時會發生什麼？你在哪裏重定向？

來源

2011-12-18 19:46:11 redShadow

表格顯示正確，並且它只是正在加載的對象（沒有其他HTML，例如,等）。表單動作是「」。提交不重定向，它只是清除整個框架（它消失）。通過POST提交（阿賈克斯，我認爲） – akkiya 2011-12-18 19:56:18

''？你爲什麼通過ajax加載框架？另外，如果操作是「」，瀏覽器將POST提交到顯示錶單的頁面的相同路徑，而不是像'my_form.php'那樣提交表單的路徑，就像從my_form.php提交表單一樣... – redShadow 2011-12-18 21:36:15

因爲你的表單操作將是一個不同的網頁，讓你每次點擊一次提交按鈕，它會將您重定向到該頁面，你可以嘗試使用iframe將工作方式，或者如果你想比糊的jQuery只使用你的一些代碼，以便我們可以瞭解實際發生了什麼...雖然iframe是你的最佳解決方案，就好像現在

來源

2011-12-18 19:48:10

好的，謝謝，我粘貼了代碼。我想避免iframe，但如果沒有其他合理的方法，我會。行動是「」;這是一個「後」的方法。 – akkiya 2011-12-18 19:54:54

隨着你的代碼，你只加載你的窗體的HTML部分。所以當用戶按提交按鈕時，你的字段已經發送到原始頁面，而不是「my_form.php」，我想你管理POST數據。最簡單的解決方案是使用IFRAME加載你的表單代碼。

來源

2011-12-18 19:48:21 InuYaksa

這就是我一直在想的可能也會發生...... – akkiya 2011-12-18 19:57:59

您的形式缺少操作試試這個，我試圖和我結束工作

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>

來源

2011-12-18 20:01:46

工作原理：D當我像你所描述的那樣更改動作參數時，POST在該位置用變量執行 - 可以將php腳本移動到它自己的文件中。非常感謝！ – akkiya 2011-12-18 20:10:32

用jQuery動態加載表單

回答

相關問題