Question

我正在设计一个论坛，我希望它看起来动态。我已经使表单详细信息成功存储在ajax中。但我希望数据存储后在页面中显示数据。我不希望页面重新加载。有可能吗？

这是我的HTML代码

 <form class="col s12">
        <div class="row">
            <div class="input-field col s4">
                <i class="tiny material-icons prefix">subject</i>
                <input type="text" id="icon_prefix2"  name ="heading" required></input>
                <label for="icon_prefix2">Heading for your discussion</label>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s8">
                <i class=" tiny material-icons prefix">mode_edit</i>
                <input type="text" id="icon_prefix2"  name ="discussion" required></input>
                <label for="icon_prefix2">Start your discsussion</label>
                <input type="submit" class="btn waves-effect waves-light right" value="post">
            </div>

        </div>
    </form>
<div class="subheading">
    Posted Discussions
</div>

点击post.it使用以下脚本存储，并在发布时弹出Toast消息。代码是

$(function () {


    $('form').on('submit', function (e) {

        e.preventDefault();

        $.ajax({
            type: 'post',
            url: 'cardiosubmit.php',
            data: $('form').serialize(),
            success: function () {
                myFunction()

            }

        });

    });

});

如何在发布表单后从页面上的db生成数据。

Answer 1

您可以从您的php脚本返回包含所需数据的json，并将其打印在您的页面中。

在你的php文件中：

//after saving data to db
$html = '<div>';
$html .= '<span>Field:'.$valueOfFieldYouWantToDisplay.'</span>';//add more if needed.
$html .= '</div>';
return json_encode($html);


$(function () {


$('form').on('submit', function (e) {

    e.preventDefault();

    $.ajax({
        type: 'post',
        url: 'cardiosubmit.php',
        data: $('form').serialize(),
        success: function (data) {
            myFunction();
            $('.subheading).html(data.html);
            // returnedHtml is Data/HTML from your php. It can be in form of a thread.

        }

    });

});

}）;

Answer 2

在这里，您可以在不刷新页面的情况下插入和获取数据

// Insert data
$(function () {
    $('form').on('submit', function (e) {
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: 'cardiosubmit.php',
            data: $('form').serialize(),
            success: function () {

                // Call function to get all the data.
                getAll()
            }
        });
    });
});

// Get data
function getAll()
{
    $.ajax({
        type: 'post',
        url: 'getcardiodata.php',
        data: $('form').serialize(),
        success: function () {
        //Now, your all the data will get by ajax responce. which is appent in the html format.
            $("#Responce").htlm();
        }
    });
}

<强> getcardiodata.php

<?php
    /*
     * Your logic to get data from the database 
     * simple return/echo your database result
     * its return in the ajax success responce
     */

?>
// Your result where you want to display data
<div id="Responce"></div>

如何将数据从php传递到javascript

2 个答案: