AJAX和PHP应用小整合
来源：互联网 发布：老千2神之手结局知乎 编辑：程序博客网 时间：2024/06/05 10:56
AJAX（异步javascript和XML）使得互联网技术与时俱进，下面则整合ajax读取数据的几个形式：
ajax1.html文件：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery.js"></script>
<script type="text/javascript">
function loadXMLDoc(){
var xmlhttp;
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
}
function Load(){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
document.getElementById("div").innerHTML=xhr.responseText;
$("#div2").html(xhr.responseText);
}
}
xhr.open("get","./test.txt",true);
xhr.send();
}
$(document).ready(function(){
$("#button").click(function(){
$.ajax({
url: 'test.txt',
dataType: 'text',
success: function(data) {
//alert(data);
//$("#div3").html(data);
//document.getElementById("div3").innerHTML=data;
$("#div3").html(data);
}
});
});
});
$(document).ready(function(){
$("#button2").click(function(){
$.ajax({
url:"XML.xml",
dataType:"xml",
success:function(data){
var table="<table border='1px'><tr><td>TITLE</td><td>ARTIST</td><td>COUNTRY</td><td>COMPANY</td><td>PRICE</td><td>YEAR</td></tr>";
$(data).find("CD").each(function(){
var title=$(this).find("TITLE").text();
var artist=$(this).find("ARTIST").text();
var country=$(this).find("COUNTRY").text();
var company=$(this).find("COMPANY").text();
var price=$(this).find("PRICE").text();
var year=$(this).find("YEAR").text();
table+="<tr><td>"+title+"</td><td>"+artist+"</td><td>"+country+"</td><td>"+company+"</td><td>"+price+"</td><td>"+year+"</td></tr>";
});
table+="</table>";
$("#div4").html(table);
$('tr:even').addClass("bga");
$('tr:eq(0)').removeClass("bga").addClass("bgd");
$('tr:odd').addClass("bgb");
}
});
var t="This is AJAX code!";
$("#div5").html(t);
});
});
$(document).ready(function(){
$("#button3").click(function(){
$.ajax({
type:"POST",
url:"good.php",
data:{"ball":"乒乓球","date":"2017-04-11","status":"学生"},
dataType:"xml",
success:function(data){
var html="";
var h="";
$(data).find("time").each(function(){
var st=$(this).find("st").text();
html+='<input type="radio" value="'+st+'"/>'+st;
h+='<option value="'+st+'">'+st+'</option>';
});
$("#div7").html(html);
$("#select").html(h);
}
});
;
});
});
</script>
<style type="text/css">
.bga{background-color:red;}
.bga{
background-color:green;
}
.bgb{
background-color:purple;
}
.bgc{
background-color:#2BD4D7;
}
.bgd{
background-color:blue;
}
</style>
</head>
<body>
<h2>AJAX</h2></br>
<button type="button" onclick="loadXMLDoc()" title="JS方法读取TXT文件并显示">请求数据</button>
<div id="myDiv"></div>
<button type="button" onclick="Load()">请求数据...</button>
<div id="div">AJAX显示处</div>
<div id="div2">编码格式为UTF8</div>
<button type="button" id="button" title="JQuery方法读取TXT文件数据并显示">请求数据...</button>
<div id="div3">编码格式为UTF-8....</div>
<button type="button" id="button2" title="读取同一路径下的XML文件，Jquery方法处理——这里用于生成表格">读取XML...</button>
<div id="div4"></div>
<div id="div5"></div><br><br>
<button type="button" id="button3" title="发送PHP文件及数据，并返回XML文件，并用JQUERY方法处理——这里用于选择框和单选框的生成">请求PHP文件</button><div id="div6"><select name="select" id="select" size="1">
<option value="未选择">未选择</option>
</select></div>
<div id="div7"></div>
<span id="d1">这是第<br>一段数据</span><br>
<button id="b1" onclick="F();">打印前面的文字（注意有换行符）</button>
<span id="d3">打印显示处1</span><br>
<span id="d4">打印显示处2</span><br>
<span id="d5">打印显示处3</span><br>
<span id="d6">打印显示处4</span><br>
<button onclick="F1();">显示</button>
<div id="d7">打印显示处5</div>
<script>
function F(){
var d1=document.getElementById("d1").innerText;
var d2=document.getElementById("d1").innerHTML;
//获取文字
document.getElementById("d3").innerText=d1;
document.getElementById("d4").innerText+=d1;
document.getElementById("d5").innerHTML=d2;
document.getElementById("d6").innerHTML+=d2;
//由于ID的唯一性，因此通过ID获取的对象也有唯一性，可直接跟“.value,.innerHTML，.name”等
}
function F1(){
var span=document.getElementsByTagName("span");
//也可通过标签名（TagName),name属性（Name),类属性(ClassName)等方法获取对象，但与ID方法不同，获得的对象是数组形式的，因此“Element->Elements”，而且后面不能直接跟对象对应的属性，需要用数组提取的方法才能确切获取属性值
var d=document.getElementById("d7").innerHTML
for(var i=0; i<span.length; i++){
d=d+span[i].innerHTML
}//逐个遍历数组对象，并提取属性值
document.getElementById("d7").innerHTML=d;
}
</script>
</body>
</html>
这里要在同一路径下（必须在服务器运行的路径下，以APACHE为例），需要几个文件：
1、jQuery文件，自己下载，并改名（因为这里引入该文件处是：<script src="jquery.js"></script>）
2、test.txt文件，test1.txt文件:自己创建，随意编写，最好用notepad++软件改编码格式，改为UTF-8无BOM，以防出现乱码显示。
3、XML.xml文件：这里用的是：
<?xml version="1.0" encoding="utf-8"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Eros</TITLE>
<ARTIST>Eros Ramazzotti</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>BMG</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>One night only</TITLE>
<ARTIST>Bee Gees</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1998</YEAR>
</CD>
<CD>
<TITLE>Sylvias Mother</TITLE>
<ARTIST>Dr.Hook</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS</COMPANY>
<PRICE>8.10</PRICE>
<YEAR>1973</YEAR>
</CD>
<CD>
<TITLE>Maggie May</TITLE>
<ARTIST>Rod Stewart</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Pickwick</COMPANY>
<PRICE>8.50</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Romanza</TITLE>
<ARTIST>Andrea Bocelli</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.80</PRICE>
<YEAR>1996</YEAR>
</CD>
<CD>
<TITLE>When a man loves a woman</TITLE>
<ARTIST>Percy Sledge</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Atlantic</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Black angel</TITLE>
<ARTIST>Savage Rose</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Mega</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1995</YEAR>
</CD>
<CD>
<TITLE>1999 Grammy Nominees</TITLE>
<ARTIST>Many</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Grammy</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1999</YEAR>
</CD>
<CD>
<TITLE>For the good times</TITLE>
<ARTIST>Kenny Rogers</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Mucik Master</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1995</YEAR>
</CD>
<CD>
<TITLE>Big Willie style</TITLE>
<ARTIST>Will Smith</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>Tupelo Honey</TITLE>
<ARTIST>Van Morrison</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1971</YEAR>
</CD>
<CD>
<TITLE>Soulsville</TITLE>
<ARTIST>Jorn Hoel</ARTIST>
<COUNTRY>Norway</COUNTRY>
<COMPANY>WEA</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1996</YEAR>
</CD>
<CD>
<TITLE>The very best of</TITLE>
<ARTIST>Cat Stevens</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Island</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Stop</TITLE>
<ARTIST>Sam Brown</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>A and M</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Bridge of Spies</TITLE>
<ARTIST>T`Pau</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Siren</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Private Dancer</TITLE>
<ARTIST>Tina Turner</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Capitol</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1983</YEAR>
</CD>
<CD>
<TITLE>Midt om natten</TITLE>
<ARTIST>Kim Larsen</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Medley</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1983</YEAR>
</CD>
<CD>
<TITLE>Pavarotti Gala Concert</TITLE>
<ARTIST>Luciano Pavarotti</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>DECCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1991</YEAR>
</CD>
<CD>
<TITLE>The dock of the bay</TITLE>
<ARTIST>Otis Redding</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Atlantic</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Picture book</TITLE>
<ARTIST>Simply Red</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Elektra</COMPANY>
<PRICE>7.20</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Red</TITLE>
<ARTIST>The Communards</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>London</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Unchain my heart</TITLE>
<ARTIST>Joe Cocker</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>EMI</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1987</YEAR>
</CD>
</CATALOG>
4、good.php（WAMP所支持的后台程序文件）文件，有两种选择：
（1）、简单而且内容固定：（使用该文件，需要在这一行（data:{"ball":"乒乓球","date":"2017-04-11","status":"学生"},）前面添加“//”，表示注释）
<?php
header("Content-type:text/xml;charset=utf-8");
$xml='<?xml version="1.0" encoding="utf-8" ?><t>';
$xml.='<time><st>17:00:00</st></time>';
$xml.='<time><st>16:00:00</st></time>';
$xml.='<time><st>18:00:00</st></time></t>;
echo $xml;
（2）、复杂多变，与后台数据库操作有关的（需要有后台数据库的支持）：
header("Content-type:text/xml;charset=utf-8");
//头标签用于控制打印数据的格式
//因为该文件用于AJAX传送数据，要获取XML格式数据，因此打印数据的格式为XML，编码为UTF-8（默认打印HTML格式，可以省略：Content-type:text/html)
$dsn='mysql:host=localhost;dbname=ydc;charset=utf8';
$options=array(PDO::MYSQL_ATTR_INIT_COMMAND=>"SET NAMES 'UTF8' ");
//$options这句话防止输出时，出现中文乱码
try{
$pdo=new PDO($dsn,'root','',$options);
}catch(PDOException $e){
exit('PDO mysql 连接失败：'.$e->getMessage());
}
$d=date("Y-m-d");
$ball=isset($_POST['ball'])?$_POST['ball']:"乒乓球";
$date=isset($_POST['date'])?$_POST['date']:$d;
$s=isset($_POST['status'])?$_POST['status']:"学生";
$xml='<?xml version="1.0" encoding="utf-8" ?><t>';
$sql="select distinct time_start from place where open like '%{$s}%' and ball='$ball' and date='$date' ";
$info=$pdo->query($sql)->fetchAll(PDO::FETCH_ASSOC);
foreach($info as $v){
$xml.="<time><st>".$v['time_start']."</st></time>";
}
$xml.='</t>';
echo $xml;
?>
- AJAX和PHP应用小整合
- ajax+php快速上手和应用
- php的cookie和session小应用
- PHP Ajax小事例
- S2和ajax整合
- struts2和ajax整合
- Ajax小应用函数
- php ajax 简单应用
- php_ajax_database(php和Ajax、还有数据库的结合应用例子)
- Ajax应用：使用jQuery和PHP实现功能开关效果
- php和java整合
- apache和php整合
- apache和php整合
- struts 和 ajax 整合总结
- Shiro和AJAX完美整合
- Spring mvc和ajax整合
- JQuery整合Ajax的方式及应用
- AJAX在PHP中的应用
- Solr Suggest组件的使用
- 多项目集中权限管理系统 采用cas +shiro+spring mvc+mbatis+bootstrap单点登录
- NYOJ 491 幸运三角（dfs+打表）
- cxf+wss4j+mysql webservice 加密服务开发
- Lucene根据字段进行自定义搜索扩展
- AJAX和PHP应用小整合
- 《Node.js实战（第2季）》试读感想
- Spring主从数据源动态切换
- php,java实现访问者模式
- 如何编译成功cas最新maven项目
- 本地通过源码方式启动solr
- 文件操作
- windows下Python安装basemap教程
- ajax跨域调用和非跨域调用的写法
