JS/Ajax：提交表单而不刷新页面或单击按钮答案

【问题标题】：JS/Ajax: Submit form without page refresh or button clickJS/Ajax：提交表单而不刷新页面或单击按钮
【发布时间】：2012-07-13 22:45:24
【问题描述】：

我正在尝试提交表单而无需单击按钮或刷新页面。提交表单后，我将通过 php.ini 回显输入字段中的值。问题是我添加了一个计时器，但根本没有做任何事情。一旦用户停止输入，我如何设置计时器给两秒钟（keyup）然后取值？ EXAMPLE

<script>
$(function() {

var timer;

$(".submit").click(function() {

  $('submit').on('keyup', function() {

    var name = $("#name").val();


    var dataString = 'name='+ name;


            $.ajax({
            type: "POST",
            url: "index.php",
            data: dataString,
            success: function(result){
            /*$('.success').fadeIn(200).show();
            $('.error').fadeOut(200).hide();*/
            $('#special').append('<p>' +  $('#resultval', result).html() + '</p>');

                }

           });
            return false;
});

}, 2000;


});
</script>

PHP

 <?php
 if($_POST){
     $url     = $_POST['name'];
     echo ('<b><span id="resultval">'.$url.'</span></b>');
    }
 ?>

【问题讨论】：

var timer; 和 }, 2000; 是什么？看起来你正在寻找我的setInterval。
你为什么要在点击功能里面做一个keyup？这甚至会火吗？
从可用性和可访问性的角度来看真是个坏主意。 Auto-submitting forms is evil

标签： javascript jquery ajax

【解决方案1】：

http://jsfiddle.net/earlonrails/pXA6U/2/

$(function() {
 var timer = null; 
 var dataString;
 function submitForm(){
   alert("success");
   $.ajax({ type: "POST",
            url: "index.php",
            data: dataString,
            success: function(result){
              alert("success");
            }

   });
   return false;
 }
 $('#submit').on('keyup', function() {
    clearTimeout(timer);
    timer = setTimeout(submitForm, 2000);
    var name = $("#name").val();
    dataString = 'name='+ name;
 });

});

【讨论】：

+1 谢谢，它在 jsfiddle 中完美运行。我复制粘贴到我的示例中，但没有得到任何结果或成功消息。我什至添加了$(document).ready，但没有任何反应。您可以查看SITE

【解决方案2】：

我使用以下内容来提供带有可视计时器的自动刷新页面。它做的比你需要的要多，但它可以被剥离成更简单的东西。

在页面加载时启动它

auto_refresh();

以下支持功能

/**
 * This function checks if the auto-refresh check box is checked and then refreshes the page.
 *
 *
 */
 function auto_refresh() {
    // ****************************************
    //           Countdown display
    // **************************************** 
    $("#countdown").progressbar({ value: 100 });
    check_refresh(120, 120);
    $("#autorefresh").click(function() {
            if ($(this).attr("checked") == "checked") {
                $("#countdown").progressbar("option", "disabled", false );
                $("#countdown").progressbar("option", "value", 100);
                check_refresh(120, 120);
            } 
        });
 }

还有……

/**
 * This functions sets the time interval used to auto-refresh the page.
 */
function check_refresh(countdownValue, secondsRemaining) {
    var autorefresh = $("#autorefresh");

    if ($(autorefresh).attr("checked") == "checked") {      
        setTimeout(function() {
            var value = Math.round(secondsRemaining / countdownValue * 100);
            // consoleDebug("Seconds remaining: " + secondsRemaining);
            secondsRemaining -= 10;
            $("#countdown").progressbar("option", "value", value);
            if (secondsRemaining < 0) {
                loadDashboard();  // <--- Launch whatever you want here.
                check_refresh(120, 120);
            } else {
                check_refresh(countdownValue, secondsRemaining);
            }
        }, 10000);
    } else {
        $("#countdown").progressbar({ disabled: true });
    }
}

【讨论】：