使用onClick重新加载页面上的单个DIV - Reload a single DIV on a page using onClick

Reload a single DIV on a page using onClick

在我的页面中有几个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>

<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)
            }
        });
    });
});

您需要的是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