HTML：启用多次提交而不刷新答案

【问题标题】：HTML : Enable Multiple Submission without refreshingHTML：启用多次提交而不刷新
【发布时间】：2012-05-27 03:59:06
【问题描述】：

我想增强我的工具页面，一旦使用单击按钮。请求转到服务器并根据返回类型（失败/通过）我更改按钮的颜色。没有刷新/页面重新加载

页面有多个按钮：如下所示。

Name       9-11  -  11-2      2-5

Resource1 - Button - Button - Button 

Resource2 - Button - Button - Button 

Resource1 - Button - Button - Button

我是一名 C++ 程序员，所以你可能会觉得我问了一个简单的问题

【问题讨论】：

你要找的是ajax。
你需要ajax。我不知道你使用的是什么语言，所以我不知道它是如何工作的。但在大多数情况下，这将在 javascript 中完成...
是的！我读过关于 Ajax 的人，我认为这是解决方案

标签： php javascript jquery html wamp

【解决方案1】：

这是一个发布Form 的jQuery Ajax 示例。就个人而言，我不熟悉 PHP，但无论如何 Ajax 都是一样的。您只需要发布到可以返回Success = true 或false 的内容。此 POST 异步发生，因此您不会刷新页面，除非您在 success: 部分执行特定操作。

$("document").ready(function () {

    $('form').submit(function () {
        if ($(this).valid()) {
            $.ajax({
                url: yourUrlHere,
                dataType: "json",
                cache: false,
                type: 'POST',
                data: $(this).serialize(),
                success: function (result) {
                    if(result.Success) {
                        // do nothing
                    }                           
                }
            });
        }
        return false;
    });
});

当然你也不必是POST，也可以是GET

type: 'GET',

如果您不需要传递任何数据，请留下 data: 部分。但是如果你想指定数据你可以用data: { paramName: yourValue },

如果要缓存页面，可以省略cache: false, 行。鉴于您不会显示任何更改，您可以删除该行。 jQuery 将一个唯一值附加到 Url 以防止它被缓存。指定 type: "json", 或任何您的特定类型总是一个好主意，但不是必需的。

【讨论】：

【解决方案2】：

尝试在 jquery 中使用 $.post 或 $.get 函数

$.post("url",$("#myform").serialize());

按照 Fabrício Matté 的建议添加回调函数

$.post("url",$("#myform").serialize(),function(data){alert(data);$("#myform").hide()//?Do something with the returned data here});

【讨论】：

还有一个回调函数，因为他想根据ajax调用的响应来操作DOM。

【解决方案3】：

给你。你会发现一个表单的例子，一个按钮一个必要的 ajax 处理 php 页面。试试看，让我们知道结果如何：

<form action="" method="post" name="my_form" id="my_form">
  <input type="submit" name="my_button" id="my_button" value="Submit">
</form>


<script type="text/javascript">
$("document").ready(function () {

    $('#my_form').submit(function () {

        $.ajax({
                url: "ajaxpage.php",
                dataType: "json",
                type: "POST",
                data: $(this).serialize(),
                success: function (result) 
                    {
                        //THere was an error
                        if(result.error) 
                        {
                            //So apply 'red' color to button
                            $("#my_button").addClass('red');
                        }
                        else
                        {
                            //there was no error. So apply 'green' color
                            $("#my_button").addClass('green');  
                        }
                    }                           
            });

        return false;
    });
});
</script>

<?php 
//ajaxpage.php
//Do your processing here

if ( $processed )
{
    $error = false;
}
else
{
    $error = true;  
}

print json_encode(array('error' => $error));
die();

?>

【讨论】：