Question

我有一个我正在构建的网站，并且它已设置为当左侧按下链接时，页面内容将加载到右侧的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而不是刷新整个页面并丢失带有链接的左栏。

Answer 1

您可以捕获表单上的提交事件，取消默认操作，然后将其重定向到您自己的表单处理程序，然后通过AJAX提交.....或者您可以将提交按钮更改为调用的常规按钮你的表单处理程序，然后通过AJAX提交。

Answer 2

您应该拥有该表单的提交处理程序，并确保在函数末尾返回false，以停止表单的默认操作。

$('#message').on('submit', function() {
    $.post('Admin/message.php', $('#message').serialize(), function( html ){
       // do something with return message
    });
    return false;
});

Answer 3

我认为会是这样的：

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

    // this will prevent the event from bubbling and keep the page from refreshing
    return false;
  });
</script>

Answer 4

第一页：

    <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

}
?>

Ajax加载 - 表单提交

4 个答案: