jQuery无刷新传入DataList数据源

Posted 2023-04-01

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery无刷新传入DataList数据源相关的知识，希望对你有一定的参考价值。

我要使用Jquery的Ajax实现界面的无刷新.根据DropDownList的值查询出数据.然后将查询出的结果.给DataList.我急用.我是新手.麻烦说清楚一点..谢谢

我这里有一个三联下拉列表的例子就是无刷新更新数据的

我给你提供一个三级的
主页面是
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>三级联动下拉列表</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
<!--
var temp;
var ids = ['province','city','eare1']; //默认要操作的三个ID，注意先后顺序，不可颠倒。
// 参数说明:pid是关联的id (第二个参数) 的父级,n表示是第几级,(如第一级，第二级，第三级),selected 默认被选中的选择的主键
function getList (pid,id,n,selected)
var list = document.getElementById(id);
//$.post 会通过POST传递2个值
//pid和action由于有？存在又传递了一个act
$.post ('ajax.php?act=getList','pid':pid,'action':id,function (data)
var temp1 = eval('('+ data +')'); //把传过来的字符串转化成一个JSON对象。
var leng = temp1.length;

var n = (n > ids.length ) ? ids.length : n;
n = (n < 0 ) ? 0 : n;
for (var j = n ; j < ids.length ; j++)

var t = 'temp'+j
t = document.getElementById(ids[j]);
t.options.length = 1;
t.options[0]=new Option('请选择','*');

if (leng > 0)
list.length = leng + 1;
for (var i=0;i < temp1.length ;i++ )

list.options[i+1]=new Option(decodeURI(temp1[i].key),temp1[i].val);
if (temp1[i].region_id == selected )
list.options[0].selected = 'selected';

if (selected&&list.options[i+1].value==selected)
list.options[i+1].selected = 'selected';

if(pid == '*')
switch(id)
case 'city':
t = document.getElementById('city');
t.options.length = 1;
t.options[0]=new Option('请选择','*');
t = document.getElementById('eare1');
t.options.length = 1;
t.options[0]=new Option('请选择','*');
break;
case 'eare1':
t = document.getElementById('eare1');
t.options.length = 1;
t.options[0]=new Option('请选择','*');
break;

if(document.getElementById('city')&&document.getElementById('city').value=='*')
t = document.getElementById('eare1');
t.options.length = 1;
t.options[0]=new Option('请选择','*');

);

$(function ()
getList ('1','province',1);
//三个都写是为了修改的时候，请三个框中默认的都有选中的值,一般增加的时候只写第一个就可以了。
);
</script>
</head>

<body>
<div >
<select name="yc1" id="province" onchange="getList (this.value,'city',1)">
<option value="*" selected="selected">请选择</option>
</select>

<select name="yc2" id="city" onchange="getList (this.value,'eare1',2)">
<option value="*" selected="selected">请选择</option>
</select>

<select name="yc3" id="eare1">
<option value="*" selected="selected">请选择</option>
</select>

</div>
</body>
</html>

AJAX 页面是
<?php
$link = mysql_connect("localhost", "root", "123456");
mysql_select_db("mydatabase");
//接收$.post传递的值并通过值对数据库进行操作
$act = isset ($_GET['act']) ? $_GET['act'] : '' ;
$action = isset ($_POST['action']) ? $_POST['action'] : '' ;
$pid = isset ($_POST['pid']) ? $_POST['pid'] : '' ;
$arr = array();
switch ($action)
case 'province':
$sql = "select DISTINCT(province_name) val,province_id key from province order by id";
$res = mysql_query($sql);
while($col = mysql_fetch_array($res))
$arr[] = $col;

break;
case 'city':
$sql = "select DISTINCT(city_name) val,city_id key from city where `province_id` = '".$pid."'
order by id";
$res = mysql_query($sql);
while($col = mysql_fetch_array($res))
$arr[] = $col;

break;
case 'eare1':
$sql = "select DISTINCT(eare1_name) val,eare1_id key from eare1 where `city_id` = '".$pid."'
order by id";
$res = mysql_query($sql);
while($col = mysql_fetch_array($res))
$arr[] = $col;

break;

mysql_close($link);
$list = array();
$i = 0;
foreach($arr as $k => $v)
foreach($v as $key => $value)
if(!preg_match("|^\d+|",$key))
$list[$i][$key] = $value;

$i++;

//把格式化的数据通过json_encode和print_r返回
print_r (json_encode ($list));

数据库关联是
表province 区域表
有ID province_id province_name三个字段
id是自增的 province_id为唯一
表CITY 城市表
有ID city_id city_name province_id
其中province_id与province表的province_id对应
id是自增的 city_id为唯一
最后一个表类似与city表

jquery.js可以到http://jquery.com/下载

如果有问题可以在晚上7-10点在H!给我留言参考技术A 一般得用json格式传递数据，datalist是服务器控件，实际它用数据源最后生成的是table或div模式（默认table）。

所以前台是无法给datalist赋值的，但是可以利用返回的json格式数据来绑定<tr><td>

$.ajax(
url: 'xxx.aspx?id=xxx',
type: 'GET',
error: function()
alert('Error loading XML document');
,
success: function(xml)
xml就是你想要的东西。如想要json格式，在参数里加上 dataType:'json'

);

参考资料：jquery

本回答被提问者采纳参考技术B 网上有代码