php后台执行js,学习笔记：js动态添加html代码，ajax异步编程，后台运行php页面，...

这两天，一直想完成一个功能，点击添加按钮，在列表最后一行显示一个text文本框，点击ok动态添加列表，列表内容直接显示在列表的最后一行，不刷新该页面，同时将列表内容添加到数据库中，重新加载网页时，根据数据库中数据的行数，动态显示列表的行数

因为是新手，所以这个功能困扰我很久，经过不断的探索学习，终于找到了方法：

想要动态的添加文本框，需要用到js动态的添加html代码或元素到网页，代码如下：

function AddtoList(insert)

{

var name = "text"

+ id;

insertText

= "《input type=\"text\" id=\"" + name + "\"

/》《input οnclick=\"AddtoData('" + name + "')\" type=\"button\"

value=\"ok\"/》";

document.getElementByIdx_x("insert").innerHTML=insertText;

id++;

}

上面代码是动态添加html代码，在id="insert"的div中添加text和button的代码，我想document为该网页的一个对象，getelementbyid便是通过id获得网页中某一元素的对象，对其属性innerhtml赋值，便可实现在该id的元素中插入html代码，动态添加div，table，form，等元素只需要修改inserttext变量即可

点击上面插入的button便可进入一个叫addtodata的函数，该函数使用ajax技术，后台运行php页面进行数据库操作，代码如下：

function AddtoDate(name)

{

//上述动态添加text的代码中值，存到变量value中

value =

document.getElementByIdx_x(name).value;

//ajax异步编程步骤1：初始化ajax

myphpajax =

creatXMLHttpRequest();

var url =

"addtolist.php?name=" +

encodeURI(value);//传递的参数如果是中文，需要用encodeuri函数转化中文字符，php文件中用urldecode转化字符，便可传递中文参数了，否则参数无法获取

//步骤2：打开与服务器的链接，这里用post方式打开

myphpajax.open("POST",url,true);

myphpajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//步骤3：设置监听响应状态的回掉函数

myphpajax.onreadystatechange

= processResponse;

//步骤4：发送请求，发送带参数的请求，请用post方式

myphpajax.send(null);

}

初始化xmlhttprequest代码如下：

function creatXMLHttpRequest()

{

var

phpajax;

if(window.XMLHttpRequest)

{

phpajax

= new XMLHttpRequest();

}

else

if(window.ActiveXObject)

{

try

{

//dom 2浏览器，除ie外，都是dom 2浏览器

phpajax

= new ActiveXObject("Msxml2.XMLHTTP");

}

catch

(e)

{

//ie浏览器

try

{

phpajax

= new ActiveXObject("Microsoft.XMLHTTP");

}

catch(e){}

}

}

return

phpajax;//返回xmlhttprequest对象

}

回掉函数代码如下：

function processResponse()

{

if(myphpajax.readyState

== 4)//readystate为响应状态，分1，2，3，4，4为响应完成

{

if(myphpajax.status

==

200)//响应虽然完成了，但响应的结果却分很多种，只有当status值为200时，服务器才是响应正常，其它状态有兴趣可自行查阅

{

alert("响应完成");

} } }

后台php页面只需要正常写网页便可，我的php页面中只有php代码

至此动态添加html代码，后台异步运行便完成了