0 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="./js/jquery.blockUI.js"></script>
<script>
$(document).ready(function(){
$(".menuLink").click(function(){

$('#content').block({ 
  centerY: 0, 
  css: { top: '40px', left: '', right: '10px' },
  message: '<img src="./Images/ajax_loader.gif" /><br /><h3>Loading...Please wait.</h3>' 
});

$.ajax({
type: "POST",
url: $(this).attr('href'),
cache: false,
success: function(html){ $("#content").html(html); }
});

});

$(document).ajaxStop(function(){
$('#content').unblock();

});
});
</script>

これは、div id=menu でリンクを取得するためのコードです。クリックすると、php ファイルが div id=content にロードされます。ahref はこちらです。

<p><a class="menuLink" href="Test.php" onclick="return false;">Wall</a></p>

上記のスクリプトを使用したクラスと onclick により、リンクが div id=menu でクリックされたときに Test.php が div id=content に読み込まれます。

以下はTest.phpのスクリプトです

session_start();
include_once("connect.php");
include_once("functions.php");

if($_POST['WallSubmit'] && $_POST['Wall']){

  $wall = makesafe($_POST['Wall']);

mysql_query("INSERT INTO `Wall` (`ID`, `Username`, `MessageBy`, `Date`, `Message`) VALUES ('', '', '$username', '" . time() . "', '$wall')");

}

<form method='post'>
  <table class="default" style="width: 80%" align="center">
<tr>
  <td class="subheader">Wall</td>
</tr>
<tr>
  <td class="content">Post a comment.<br /><textarea name='Wall' id='Wall' style='width: 99%; height: 110px;'></textarea><br /><br/><center><input type='submit' value='Post' name='WallSubmit' /></center><br /><hr><br />Latest Comments.</td>
</tr>
</td>
</table>
</form>

今私が抱えている問題は、hrefでわかるようにメニューの壁をクリックすると、div id=contentにロードされるため、まったく問題がないため、Test.phpがコンテンツdivに表示されますが、そのフォームに入力するとTest.php はデフォルトのコンテンツ ページに更新されるだけで、そのデフォルトのコンテンツに更新されない場合はデータベースが更新されず、クリックしてもボタンは何もしません。これで、コーディングがデータベースとフォームに対してそのまま機能することがわかりました。フレームレイアウトでテストされており、Test.php をデフォルトのコンテンツページに設定しても機能し、ページにあるようにデフォルトのコンテンツを配置します。

<div id="content" class="auto">
           <?include_once("Test.php");?>
         </div>

これに対する解決策は何ですか？少し混乱するように聞こえるかもしれませんが、メニューの Wall をクリックすると、Test.php が div id=content に読み込まれ、Test.php でフォームを取得して仕事をする方法を理解したいだけです (笑)。

4

1 に答える 1

0

フォームのアクションは指定されていないため、test.php ではなく、単にページを更新してメイン ページに送信WallSubmitします。Wall代わりに、次のようにアクションを指定できます。

<form action='test.php' id='wallForm' method='post'>

ただし、これは test.php のコンテンツを含む空白のページにユーザーを誘導するだけです。代わりに、JavaScript 内で ajax 呼び出しを行う必要があります。

$(document).ready(function() {
    ...
    $(document).on("submit","#wallForm",function(){
        $.ajax({
        type: "POST",
        url: $(this).attr('action'),
        cache: false,
        data: {Wall: $("#Wall").val(), wallSubmit: $("[name=WallSubmit]").val()},
        success: function(html){ $("#content").html(html); }
        });
    });
    ...
});

on()DOM が読み込まれた後にフォームが読み込まれたため、呼び出す必要があります。DOM にロードされたコンテンツのみを処理するため、Javascript はそれを認識しません。詳細については、このサイトに役立つ情報が含まれています。

一般的なフォーム送信機能が必要な場合は、serialize()おそらくうまくいくはずです。jQuery API ページは、これをよく要約しているはずです。data: {Wall: ...}をに置き換えますdata: $(this).serialize()。この関数は、フォーム内の有効なフィールドを取得し、php ファイルにデータを設定するために使用できる文字列に配置します。WallSubmitただし、名前がフォームにどのような影響を与えるかはよくわかりません。私が言えることから、そのステップを完全になくすことができます。

于 2012-06-16T00:55:47.390 に答える