javascript 如何使用ajax在不刷新页面的情况下从数据库中检索数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20089758/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to retrieve data from database without refreshing page using ajax
提问by Xavi
i having a drop down box, it have two client(ex:client a,client b),i have more then 2000 data in each client table ,when selecting client i want to retrieve all data from database and show it in front end with out refreshing,now i am refresh window.locationthis refresh the page.can any one help me how to do that thanks
我有一个下拉框，它有两个客户端（例如：客户端A，Client B），我在每个客户端表中有更多的2000个数据，选择客户端我想从数据库中检索所有数据并在前端显示它刷新，现在我刷新 window.location这个刷新页面。有人可以帮助我如何做到这一点，谢谢
Ajax
阿贾克斯
<script>
$(function() { document.ready
$("#client").on("change", function() {
var ID=$(this).attr('id');
var clientid=$("#client").val();
$.ajax({
type: "POST",
data: {
clientselect: $(this).val()
},
success: function(data) {
$("#display").html(data);
window.location = '?action=clientnetworkpricelist&clientid='+clientid+'';
$("#flash").hide();
}
});
});
});
</script>
Select Box
选择框
<select name="client" id="client" style="margin:-24px 0 0 1px;background-color:#E8E8E8;width:104px;position: absolute;">
<option value="">Select Client</option>
<?php
$sql=mysql_query("select * from client_list");
$clientid=$_GET['clientid'];
while($row=mysql_fetch_assoc($sql))
{
if(strlen($_GET['clientid'])>0 && $_GET['clientid']==$row['clientid']){
print' <option id="client" name="client" value="'.$row['clientid'].'" selected>'.$row['clientid'].' </option>';}
else{
print' <option id="client" name="client" value="'.$row['clientid'].'" >'.$row['clientid'].' </option>';
}
}
?>
</select>
回答by Lucky Lefty
$.ajax({
async: false,
cache: false,
url: "your_web_address?action=clientnetworkpricelist&clientid="+clientid,
scriptCharset: "utf-8",
dataType: "html",
success: function (data) {
$("#display").html(data);
$("#flash").hide();
},
error: function (request, ajaxOptions, thrownError) {
}
});
change url to:
将网址更改为：
url: "http://www.yourpage.com/your_subpage?action=clientnetworkpricelist&clientid="+clientid
网址： “ http://www.yourpage.com/your_subpage?action=clientnetworkpricelist&clientid=” +客户端ID
回答by Rizwan Shamsher Kaim Khani
I have tried your code, actually what you are doing, you change your url, so that is why you get refresh on each and every time when you change your drop down selection.
我已经尝试过你的代码，实际上你在做什么，你改变了你的 url，所以这就是为什么每次当你改变你的下拉选择时都会刷新。
I have little bit change your selection code, i.e. I remove select keyword from if option section, secondly i have added a div after finishing of selection, as you should see in below.
我稍微更改了您的选择代码，即我从 if 选项部分中删除了 select 关键字，其次我在完成选择后添加了一个 div，如下所示。
SELECTION CODE
选择代码
<select name="client" id="client" style="margin:-24px 0 0 1px;background-color:#E8E8E8;width:104px;position: absolute;">
<option value="">Select Client</option>
<?php
$sql=mysql_query("select * from client_list");
$clientid=$_GET['clientid'];
while($row=mysql_fetch_assoc($sql))
{
if(strlen($_GET['clientid'])>0 && $_GET['clientid']==$row['clientid'])
{
print' <option id="client" name="client" value="'.$row['clientid'].'">'.$row['clientid'].' </option>';
}
else{
print' <option id="client" name="client" value="'.$row['clientid'].'">'.$row['clientid'].' </option>';
}
}
?>
</select>
<div id="result"></div>
Now I have change your ajax code. which is given below. You need to create one more file yourfile.php, this file contain data which you want to display.
现在我已经更改了您的 ajax 代码。下面给出。您需要再创建一个文件 yourfile.php，该文件包含您要显示的数据。
AJAX CODE
阿贾克斯代码
<script>
$(function() { document.ready
$("#client").on("change", function() {
var clientid=$("#client").val();
$.ajax({
type:"post",
url:"yourfile.php",
data:"title="+clientid,
success:function(data){
$("#result").html(data);
}
});
});
});
</script>
For your understanding, i added yourfile.php that you can easily understand.
为了您的理解，我添加了您可以轻松理解的 yourfile.php。
yourfile.php
你的文件.php
mysql_connect("localhost","root","");
mysql_select_db("yourdbname");
$value = $_POST['title'];
$query = mysql_query("SELECT * from client WHERE id=$value");
$result = mysql_fetch_array($query);
echo $result['clientdata'] ;
That's it.
而已。
I think it should help you.
我想它应该对你有帮助。
Thanks
谢谢
回答by itskawsar
Couple of mistake you have done in your code. First, you set a ID for multiple element in your while loop. Please remove ID attr from all option tag and keep the attr for only select tag as following:
您在代码中犯了几个错误。首先，在 while 循环中为多个元素设置 ID。请从所有选项标签中删除 ID attr 并保留仅选择标签的 attr 如下：
<select name="client" id="client" style="margin:-24px 0 0 1px;background-color:#E8E8E8;width:104px;position: absolute;">
<option value="">Select Client</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
...
</select>
Second, you used the clientidvariable in your script but did not collect value. Set value for clientidas following:
其次，您clientid在脚本中使用了变量但没有收集值。设置值clientid如下：
var clientid = $('#client').find(':selected').attr('value');
now please check, it should work now. thanks
现在请检查，它现在应该可以工作了。谢谢
