Question

在我的页面中有几个DIV，它们应该显示不同的新闻项目，具体取决于用户选择和按下提交按钮。

点击相关提交按钮后，我只能刷新一个DIV吗？

我尝试了<input type ="button">而不是<input type="submit">但是没有按预期工作。我的代码如下：

<div class="dloader"></div>
<div class="search">
    <form action="" method="post">
        Furniture: 
        <input type="text" name="val1" id="val1" value="<?=$_POST['val1']?>" />
        <input type="submit" value="Submit" name="submit" />
    </form>
</div>

<?php
    if( isset($_POST['submit']) ){
        $postItemHeader = htmlentities($_POST['val1']); 
}?>

<script>
    $(window).load(function() {
        $(".dloader").fadeOut("slow");
    })
</script>

Answer 1

为帖子事件选择一个按钮

<input type="submit" id="add" name="add" />

如果您要传递文本数据，那么文本中的文本值将获取特定数据

<div id="result">Result should appear here</div>

使用Javascript将文本数据添加到后端

$(document.ready(function() {
    $("#add").click(function(e) {
        e.preventDefault();

        $.ajax({
            url: 'test.php',
            type: 'POST',
            data: $('#add').val,
            success: function(data, status) {
                $("#result").html(data)
            }
        });
    });
});

Answer 2

您需要的是AJAX。（阅读文档）。这里有一个简单的例子。

HTML

<div id="target_div"></div> <!-- Here is where you gonna place your new content -->

<input type='button' id='trigger' onClick="get_new_data()" value="Get new Content"> <!-- When this button is pressed get new content -->

Javascript

function get_new_data()
{
    $.ajax(
    {
        type: POST,
        url: "you-url-here.php",
        dataType:"HTML", // May be HTML or JSON as your wish
        success: function(data)
        {
            $('div#target_div').html(data) // The server's response is now placed inside your target div
        },
        error: function()
        {
            alert("Failed to get data.");
        }
    }); // Ajax close
    return false; // So the button click does not refresh the page
} // Function end

使用onClick在页面上重新加载单个DIV

2 个答案: