php+js+ajax实现简单的回帖功能

概述php+js+ajax实现简单的回帖功能 PHP+Js+AJAX实现简单的回帖功能（适合新手）

效果图

HTML代码

布局不是重点，写的很简单

<div>            <ul>                <l1>张三："今天天气很不错"&nbsp;&nbsp;<button>回复</button></l1>            </ul>        </div>

CSS代码

<style>            div{wIDth:600px;margin:auto;border:1px solID #ccc;}            ul{List-style: none;}            ul li{line-height: 50px;}            input{margin-right:10px;}    </style>

Js代码

我用的都是原生，jquery会快一些，看个人喜好吧

<script>  var btn=  document.querySelector('button');//获取“回复”按钮  var ul=  document.querySelector('ul');//获取ul  //document.querySelector这种选择元素的方式与jquery基本一致，推荐使用（尽管部分低版本浏览器有兼容问题）   //为回复按钮注册点击事件  btn.onclick=function(){    var li=document.createElement('li');//动态创建li标签，用来盛放接下来的输入框和确认按钮    var input1=document.createElement('input');//动态创建input标签    input1.type="text";//设置类型为文本框，如果回复内容多，文本域好一些    var input2=document.createElement('input');//动态创建input标签    input2.type="button";//设置类型为按钮    input2.value="确认";    li.appendChild(input1);//将设置好的输入框和按钮放进li容器    li.appendChild(input2);    ul.appendChild(li);//将设置好的盛有输入框和按钮的li放进ul容器    //推荐动态元素绑定事件用事件委托，这里简写了//为确认按钮绑定事件    input2.onclick=function(){    var info=input1.value;//获取文本框的值    var xhr=new XMLhttpRequest();//创建AJAX对象    xhr.open("get","do.PHP?info="+info);//这里采用get方式发送，参数的问题后边会提到        //xhr.onload有兼容问题，但是简单，也可以监听状态，因人而异    xhr.onload=function(){                   if(xhr.responseText=="ok"){            //移除之前创建的文本框和确认按钮，将回复内容写入li容器                li.removeChild(input1);                li.removeChild(input2);                li.INNERHTML="<?PHP echo "李四：";?>"+info;//人名实际开发用session，PHP中$_SESSION["name"]                            }    }     xhr.send(null);    }  }       </script>

PHP代码

不过多解释了，没啥东西

<?PHP  if(isset($_GET['info'])){//关于之前AJAX传递的参数，判断是否存在    echo "ok";}?>

更多PHP相关知识，请访问PHP教程！ 总结

以上是内存溢出为你收集整理的php+js+ajax实现简单的回帖功能全部内容，希望文章能够帮你解决php+js+ajax实现简单的回帖功能所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。