ajax 第一个简单程序

最新推荐文章于 2022-05-23 21:20:26 发布

转载最新推荐文章于 2022-05-23 21:20:26 发布 · 655 阅读

数字专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个简单的网页应用，该应用通过Ajax技术实现从服务器动态拉取新闻数据并展示的功能。文章展示了完整的HTML页面结构及JavaScript代码，用于点击按钮时向服务器发送请求，并将返回的新闻内容插入到页面表格中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//////////////////////////////////////////pull.html

<html>
<body>
<h1> the result of pulled news:</h1>
<script type="text/javascript" src="jquery.js"></script>
<input type="button" class="pull" value="abutton"/>
<table border=1>
<tr><td>news from server:</td></tr>
<tr id="pullnews"></tr>
</table>
<script type="text/javascript">
$(".pull").click(function(){
$.ajax({
url:"handlePull.php",
data:"newsid=123", //attention:paramname=value 不是paramname:value
type:'post',
dataType:'json',/////atten:如果输入json object，这里却写成text，则object解析出undefined错误
success:function(result){
//attention: 获得参数是 object.paramname ，不能被双引号引入。
pullnews.innerHTML="<td>"+result.title+"</td><td>"+result.digest+"</td>";
alert("ajax recv:"+result);
}});
});
</script>
</body>
</html>

////////////////////////////////////////////////////////////////////////////////handlePull.php

<?php

class news{ public $newsid,$title,$digest;}; $news=new news;

$news->newsid=$_REQUEST["newsid"];
$news->title="中日建交n年";
$news->digest="小泉纯一郎参拜靖国神社，被中国人民强烈谴责";
echo json_encode($news);
?>