Question

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

Page有多个按钮：如下所示。

Name       9-11  -  11-2      2-5

Resource1 - Button - Button - Button 

Resource2 - Button - Button - Button 

Resource1 - Button - Button - Button

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

Answer 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",或您的特定类型是一个好主意，但不是必需的。

Answer 2

尝试在jquery

中使用$ .post或$ .get函数

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

添加回调功能，如FabrícioMatté建议

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

Answer 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();

?>

HTML：启用多个提交而不刷新

3 个答案: