php+js+ajax實現回帖功能的完整代碼

PHP是一種通用開源腳本語言。語法吸收了C語言、Java和Perl的特點，利于學習，使用廣泛，主要適用于Web開發領域。PHP 獨特的語法混合了C、Java、Perl以及PHP自創的語法。它可以比CGI或者Perl更快速地執行動態網頁。

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+js+ajax實現回帖功能的完整代碼的詳細內容，更多請關注億速云其它相關文章！