2

我有一个正在构建的网站，它的设置是当点击左侧的链接时，页面内容会加载到右侧的 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>

现在这对于加载他们应该加载的内容的链接来说很好......现在我的问题是。其中一个页面有一个带有以下代码的表单：

<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 回答