HTML :无需刷新即可多次提交
HTML :无需刷新即可多次提交
提问于 2012-05-27 11:59:07
我想增强我的工具的页面，在那里只要点击一个按钮就可以了。请求发送到服务器，并根据返回类型(失败/通过)更改按钮的颜色。无刷新/页面重新加载
页面有多个按钮:一些类似于下面的按钮。
Name 9-11 - 11-2 2-5
Resource1 - Button - Button - Button
Resource2 - Button - Button - Button
Resource1 - Button - Button - Button我是一名c++程序员，所以您可能会觉得我问的问题很简单
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-05-27 12:04:31
下面是发布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",或您的特定类型总是一个好主意，但不是必需的。
Stack Overflow用户
发布于 2012-05-27 12:03:09
尝试在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});Stack Overflow用户
发布于 2012-05-27 13:12:44
这就是你要的。你会发现一个表单的例子，一个按钮，一个必要的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();
?>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10771549
复制相关文章
相似问题
腾讯云开发者
