Ajax get

最新推荐文章于 2023-05-05 09:25:58 发布

原创最新推荐文章于 2023-05-05 09:25:58 发布 · 404 阅读

0 ·

CC 4.0 BY-SA版权

网页专栏收录该内容

69 篇文章

订阅专栏

本文介绍了一个简单的HTML页面示例，该示例使用了JavaScript和AJAX技术来实现下拉菜单的选择功能。当用户从下拉列表中选择一个选项时，页面会通过AJAX请求从服务器获取相应数据，并更新页面上的内容。此示例展示了基本的前端交互技术和后端数据处理。

HTML内容

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>ok</title>
<body>
<form>
<p>show list of:
<select id='choice'>
<option value=" ">select</option>
<option value="good">good guys</option>
<option value="bad">bad guys</option>
</select>
</p>
<p id="result"></p>
</form>
<script src="./js/jquery.js"></script>
<script src="./js/co.js"></script>
</body>
</html>

js内容

$(document).ready(function()
{
$('#choice').change(function()
{
if($(this).val()!=' ')
{
alert($(this).val());
$.get('./php/login.php',{what:$(this).val()},
function(data)
{
$('#result').html(data);
});
}
});
});

php内容

<?php
if($_GET['what']=='good')
{
$names=array('sherlock','yu');
echo getHTML($names);
echo 'nihao';
echo "<script>alert('yao');</script>";
}
function getHTML($names)
{
$strR='<ul>';
for($i=0;$i<count($names);$i++)
{
$strR.='<li>'.$names[$i].'</li>';
}
$strR.='</ul>';
return $strR;
}
?>