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

成果图

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完成简略的回帖性能的具体内容，更多请存眷资源魔其它相干文章！