ajax 怎么获取内容并追加到一个div里面

假设你有一个主页面index.php

内容如下

<script type="text/javascript" src="ajax.js"></script>

<a href="#" onclick="ygg('o')">o</a>

<div id="divID"></div>

这是ajax.js页面如下

var xmlHttp

function $_xmlhttprequest(){

if(window.ActiveXObject){

xmlHttp= new ActiveXObject('Microsoft.XMLHTTP')

}else if(window.XMLHttpRequest){

xmlHttp = new XMLHttpRequest()

}

}

function ygg(url){

$_xmlhttprequest()

xmlHttp.open("GET","ygg.php?"+url,true)//通过该地址得到内容

xmlHttp.onreadystatechange=byphp//准备 变量

xmlHttp.send(null)//发送

}

//方法

function byphp(){

if(xmlHttp.readyState==4){

var text1 = xmlHttp.responseText

document.getElementById('divID').innerHTML = text1

}

}

顺便说下，这里有个ygg.php是得到内容的，最简单的，你可以直接

<?php

echo $_GET[id]

?>

如果你用的原生Ajax，即没有使用任何框架，可以在你的onreadystatechange函数中处理。

xmlhttprequest.onreadystatechange = function() {

if (xmlhttprequest.readyState == 4) {

// 得到响应的数据

var respone = xmlhttprequest.responseText// 你可以后台返回的就是HTML字符串。也可以是文本。如果是json格式的数据，需要你自己解析。如果是xml格式的数据，用xmlhttprequest.responseXML然后解析XML，得到你想要的数据。

然后根据ID获取DIV，使用div.innerHTML= response就可以了。

}

}

如果是用的Ajax框架，如jQuery，在success回调方法中处理。

假设你的HTML结构如下：

<div>

    <div>1</div><ul><li>2</li></ul>

    <p>这是P</p>

    <button>按钮</button>

</div>

因为div标签里的内容是你ajax获取后加载进来的，属性动态添加的，绑定事件，推荐用on，当然delegate也一样。

//因为你div内的内容是动态添加的，但这个div肯定不是吧，

//所以把事件绑定在div上，当发生点击时，判断点击的如果是按钮的话，就执行我们要做的事

//这就是jquery是实现为未来元素绑定事件的方法。

$("div").on("click","button",function(e){

    var $this=$(e.target)//这个就是被点击到的按钮

    var $parent=$(this).parent("div")//这个就是div了

    //获取到div了，我们在直接查找里面的p就行了：

    var $p=$parent.find("P")

})

---