使用jQuery AJAX检索数据而不在php中重新加载页面
Retrieving Data with jQuery AJAX Without Reloading Page in php
我曾尝试在点击选择选项时停止刷新页面,但当我停止刷新页面时,数据无法获取。
此处编码
echo "<form name='frmtopdevotees' method='post' action='topuser_load.php'>
<h4>select month <select id='seldrp' name='themonth' OnChange ='document.frmtopdevotees.submit()'>
$optionsmonths
</select>
<select name='topdevotees' id='seldrp' OnChange ='document.frmtopdevotees.submit()'>
<option value=10 $M10>Top 10</option>
<option value=20 $M20>Top 20</option>
<option value=50 $M50>Top 50</option>
<option value=100 $M100>Top 100</option>
</select> </h4>
</form>";
?>
<script>
$('frmtopdevotees').submit(function (e) {
e.preventDefault();
return false;
});
$('themonth').onchange(function () {
$.ajax({
var value = $('themonth').val();
type: 'post',
data: {
topdevotees: topdevotees,
themonth: themonth
},
url: "topuser_load.php?topdevotees=" + topdevotees + "&themonth=" + themonth,
success: function (response) {
$('themonth').append(response);
}
});
});
</script>
当我删除Onchange='document.frmtopfoveners.submit()'时,页面会停止刷新,但不会更改数据。
从您的代码中,我可以理解的是,每当您的任何一个select选项发生更改时,您都希望在不刷新页面(AJAX)的情况下触发服务器调用。
发布的代码中存在错误。以下是我的观察-
-
整个页面中只能有一个ID。您已经在几个地方使用了"seldrp"。
-
如果你想要AJAX功能,你应该避免调用表单的submit()函数。
-
AJAX语法错误,应该如下所示-
$.ajax({ url : "topuser_load.php?topdevotees=" + topdevotees + "&themonth=" + themonth, method: "post", data: { topdevotees: topdevotees, themonth: themonth }, // can even put this in variable and JSON stringify it success: function (response) { $('themonth').append(response); } });
现在来谈谈解决方案的一部分:我会这样做——1.只听JQUERY中的选择更改2.一旦触发了选择更改,就会进行AJAX调用并返回响应。修改后的代码为-
<script>
$('select').on('change', function (e) {
var month = $('#seldrp1').val();
var topdevotee = $('#seldrp2').val();
// call ajax here -
$.ajax({
url: "topuser_load.php?topdevotees=" + topdevotee + "&themonth=" + month,
method: "post",
data : JSON.stringify({
topdevotees: topdevotee,
themonth: month
}),
success : function(response){
$('themonth').append(response);
},
error : function(err){
// handle error here
}
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
echo "<form name='frmtopdevotees'>
<h4>select month <select id='seldrp1' name='themonth'>
$optionsmonths
</select>
<select name='topdevotees' id='seldrp2'>
<option value=10 $M10>Top 10</option>
<option value=20 $M20>Top 20</option>
<option value=50 $M50>Top 50</option>
<option value=100 $M100>Top 100</option>
</select> </h4>
</form>";
?>
在ajax、中将name
更改为id
$('#seldrp').onchange(function(){
^ ^
// ajax here
});
ajax中存在语法错误。
var themonth = $('#seldrp').val();
var topdevotee = $('#topdevotees').val();//topdevotess should be the id of 2nd select box.
$.ajax({
type: 'post',
data: {
topdevotees: topdevotees,
themonth: themonth
},
async:false,// this line for waiting for the ajax response.
url: "topuser_load.php?topdevotees=" + topdevotees + "&themonth=" + themonth,
success: function (response) {
$('themonth').append(response);
$('#frmtopdevotees').submit();
}
});
相关文章:
- 创建新数据和加载现有数据需要单独的视图吗
- 钛 - HTTPClient:打开新的控制器加载
- 保持 JavaScript 在浏览器控制台中运行,即使在新的页面加载之后也是如此
- 路由到新页面时加载不起作用
- 如何在新窗口完成加载后执行某些内容
- 使用新标题重新加载 html 页面
- Primefaces在打开新页面时加载数据消息
- Wordpress音频播放器和平滑状态.在新页面重新加载播放器时调用什么回调函数
- 用新数据重新加载renderer3d
- 文本不被渲染后,新的页面加载- JQuery移动
- 需要在新标签中加载pdf/doc文件,而不是下载,只是想在浏览器中阅读
- 用新参数重新加载页面
- Js和CSS不检测新页面何时加载
- 在新页面上加载一个flash视频,它在上一页上的位置
- 在新窗口中加载代码编写器视图
- 在控制台中使用新脚本重新加载页面
- 如何在加载新页面后加载AJAX数据
- 如何使用jQuery在新窗口中加载页面,然后关闭它们
- Jquery没有看到新的HTML加载到对话框中
- 无法用新值重新加载JGrid