Erlo

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

时间:2020-10-17   阅读:15次   来源:jQuery中文网
页面报错
点赞

php js ajax实现简单的回帖功能(适合新手)

效果图

d28d00e442c416a6c837f7fdcf3b46f.png

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实现简单的回帖功能的详细内容,更多请关注jQuery中文网其它相关文章!

  • 本文转载于:csdn,如有侵犯,请联系jquerycn@qq.com删除
  • 您可能感兴趣的文章:

    评论留言

    还没有评论留言,赶紧来抢楼吧~~

    吐槽小黑屋()

    * 这里是“吐槽小黑屋”,所有人可看,只保留当天信息。

  • Erlo吐槽

    Erlo.vip2020-10-22 20:16:45Hello、欢迎使用吐槽小黑屋,这就是个吐槽的地方。
  • 返回顶部