翻越这墙 发表于 2013-1-4 02:40:04

原生Ajax demo和JQ Ajax demo

原生Ajax demo和JQ Ajax demo

<div class="postText"><div id="cnblogs_post_body">　　前言：这次介绍的是利用ajax与后台进行数据交换的小例子，所以demo必须通过服务器来打开。服务器环境非常好搭建，从网上下载wamp或xampp，一步步安装就ok，然后再把写好的页面放在服务器中指定的位置。打开时，在浏览器地址栏输入“localhost/指定页面”或者“127.0.0.1/指定页面”打开。
　　下面列出demo的HTML、PHP、原生ajax 、jq ajax代码。
　　HTML代码：
<div class="cnblogs_code"><!doctype html><html><head>    <title>ajax示例</title>    <meta charset='utf-8' />    <link rel="stylesheet" type="text/css" href="css/common.css" />    <style type="text/css">      .main{height:400px;width:800px;margin:100px auto 0;border:1px solid #000;}      .list{height:400px;width:200px;float:left;background:#ddd;}      .inf{height:400px;width:600px;float:right;background:#ccc;text-align:center;}      .list li{width:200px;text-align:center;margin:50px 0 0;font-size:24px;cursor: pointer;      }      .inf img{width:360px;height:270px;margin:15px auto;}      .inf p{width:580px;text-align:left;text-indent:2em;font-size:14px;margin:0 10px;}    </style></head><body>    <div class='main'>      <div class='list' id='list'>            <ul>                <li name='spring' id='spring'>春</li>                <li name='summer' id='summer'>夏</li>                <li name='fall' id='fall'>秋</li>                <li name='winter' id='winter'>冬</li>            </ul>      </div>      <div class='inf' id='inf'>      <!--要插入的内容-->      </div>    </div></body><script type="text/javascript" charset="utf-8" src="js/jQuery.js"></script></html>
页: [1]
查看完整版本: 原生Ajax demo和JQ Ajax demo