Question

我正在尝试使用setInterval每5秒刷新一次页面数据。我有一个简单的html表单，其中一个文本框的ID为“name”。我有一个提交按钮，它工作正常（代码也在下面），但我不能让它自己的页面POST。所有帮助表示赞赏。

<script type="text/javascript" src="/media/jquery-1.10.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {
    window.setInterval(function() {
        AutoPost();
    }, 5000);
});

function AutoPost() {
    $.ajax({
        // post the form values via AJAX…
        var postdata = {name: $("#name").val()} ;
        $.post('/submit', postdata, function(data) {
            // and set the title with the result
            $("#title").html(data['title']) ;
           });
        return false ;
        });
    });
}


$(function() {
// When the testform is submitted…
$("#testform").submit(function() {
    // post the form values via AJAX…
    var postdata = {name: $("#name").val()} ;
    $.post('/submit', postdata, function(data) {
        // and set the title with the result
        $("#title").html(data['title']) ;
       });
    return false ;
    });
});

Answer 1

<script type="text/javascript" src="/media/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    function autoPost(e) {
        if (e) e.preventDefault();
        var postdata = {name: $("#name").val()} ;
        $.post('/submit', postdata, function(data) {
            $("#title").html(data['title']) ;
        });
    }

    $(function() {
        $("#testform").on('submit', autoPost);
        setInterval(autoPost, 5000);
    });
</script>

Answer 2

$.post和$.get只是结构更为$.ajax()的简写版本，所以我更喜欢使用后者。额外的结构使我保持平直。

以下是您的示例的工作版本：

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {

                window.setInterval(function() {
                    AutoPost();
                }, 3000);

            }); //END $(document).ready()

            function AutoPost() {
            //  var myName = $("#name").val();
                $.ajax({
                    type: "POST",
                    url: "test134b.php",
            //      data: 'name=' + myName,
                    success: function(data) {
                        $("#title").html(data) ;
                    }

                });
            } //END fn AutoPost

        </script>
    </head>
<body>
    Current Time:<br />
    <div id="title"></div>
</body>
</html>

以下是一些简单的AJAX构造的其他示例：

A simple example

More complicated example

Populate dropdown 2 based on selection in dropdown 1

自动提交表单以更新html页面上的ajax

2 个答案: