旗下导航:搜·么
当前位置:网站首页 > PHP教程 > 正文

php+js+ajax完成简朴的回帖功用【php教程】

作者:搜搜PHP网发布时间:2019-12-14分类:PHP教程浏览:81


导读:php+js+ajax完成简朴的回帖功用(合适新手)效果图html代码规划不是重点,写的很简朴<div><ul...
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完成简朴的回帖功用的细致内容,更多请关注ki4网别的相干文章!

标签:php