2

私が構築している Web サイトがあり、左側でリンクが押されると、ページのコンテンツが右側の div に読み込まれるように設定されています。

<div id="right-column">

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript">
    var dataReturn='';

    function makeRequest(url){
        $('#preloader').show();
        $.get(url, function(data) {
            $('#resultDiv').html(data);
            $('#preloader').hide();
        });
    }

    function makePostRequest(url, params){
        $('#preloader').show();
        $.post(url,params, function(data){
            $('#resultDiv').html(data);
            $('#preloader').hide();
        });
    }

    </script>
</head>
<body>
    <div id="preloader"></div>
<div id="resultDiv">    
<h3>Welcome <?php echo $user_identity;?></h3>
<h5>Message: <?php echo $wpdb->get_var("SELECT message FROM staff_misc");?></h5>    
</div>

</div>

これで、本来あるべきコンテンツをロードするリンクで問題なく機能します...私の質問は. ページの 1 つに、次のコードを含むフォームがあります。

<h3>Admin Message</h3>

<form id="message" method="post" action="Admin/message.php">
<input type="text" style="width:700px;" value="Set A New Message" name="admin-message"/>
<input class="submit" type="submit" name="submit" value="Submit">
</form>

<?php

if ( isset ( $_POST['submit'] ) ) //If submit is hit
{

$message = $_POST["admin-message"];
$wpdb->query("UPDATE staff_misc set Message = '$message' where id = '1'");

?><b>New Message Set:</b> <?php echo $wpdb->get_var("SELECT message FROM staff_misc");?><?php

}

そのフォームが送信されると、コンテンツを AJAX div に再読み込みするのではなく、ページ全体を更新します。ページ全体を更新してリンクで左の列を失うのではなく、ページが AJAX div に読み込まれるようにするにはどうすればよいですか。

4

4 に答える 4

1

フォームの送信イベントをキャプチャし、デフォルト アクションをキャンセルして、それを独自のフォーム ハンドラーにリダイレクトしてから、AJAX 経由で送信するか、送信ボタンをフォーム ハンドラーを呼び出す通常のボタンに変更することができます。 、次に AJAX 経由で送信します。

于 2012-10-19T21:31:43.827 に答える
1

そのフォームの送信ハンドラーが必要であり、関数の最後で必ず false を返して、フォームのデフォルト アクションを停止する必要があります。

$('#message').on('submit', function() {
    $.post('Admin/message.php', $('#message').serialize(), function( html ){
       // do something with return message
    });
    return false;
});
于 2012-10-19T21:31:55.233 に答える
1

私はそれが次のようなものになると思います：

<script>
  $("#message").submit(function() {
    // do something...

    // this will prevent the event from bubbling and keep the page from refreshing
    return false;
  });
</script>
于 2012-10-19T21:33:58.413 に答える
0

先頭ページ：

    <h3>Admin Message</h3>

    <form id="message" method="post" action="Admin/message.php">
    <input type="text" style="width:700px;" value="Set A New Message" name="admin-message" id="admin-message" />
    <input class="submit" type="submit" name="submit" value="Submit">
    </form>

<div id="result"></div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

    <script type="text/javascript">

    $(".submit").click(function(e){

     //Prevent the entire page from refreshig
     e.preventDefault();

     $.get("ajax.php?admin-message=" + $("#admin-message").val(), function(result){

          $("#result").html(result);

     });     

    });

    </script>

ajax.php

    <?php

if ( isset ( $_POST['submit'] ) ) //If submit is hit
{

$message = $_POST["admin-message"];
$wpdb->query("UPDATE staff_misc set Message = '$message' where id = '1'");

?><b>New Message Set:</b> <?php echo $wpdb->get_var("SELECT message FROM staff_misc");?><?php

}
?>
于 2012-10-19T21:44:09.600 に答える