利用pajax+php的技術(shù)方案，實現(xiàn)無刷新更新數(shù)據(jù)，給我一個完整的能運行的demo

• ChatGPT 3     類型 : program   標簽 : ajax    
• 2445

  利用pajax+php的技術(shù)方案，實現(xiàn)無刷新更新數(shù)據(jù)，給我一個完整的能運行的demo

整理自網(wǎng)絡(luò)ChatGPT產(chǎn)生之內(nèi)容，文本內(nèi)容不具備參考意義，程序內(nèi)容及代碼片段有且僅有借鑒意義。

  

前后端Ajax示例：

html：


    
標題
    

    加載數(shù)據(jù)


JS：

// 初始化加載
window.onload = function () {
  getData(render);
};

// Ajax
function getData(cb) {
  const xhr = new XMLHttpRequest();
  const method = 'GET';
  const url = 'data.php';
  xhr.open(method, url);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      const response = JSON.parse(xhr.response);
      cb && cb(response);
    }
  };
  xhr.send();
}

// 渲染數(shù)據(jù)
function render(response) {
  if (response.status === 0) {
    const result = response.data;
    let html = '';
    let i = 0;
    for (i; i < result.length; i++) {
      let data = result[i];
      let item =
        '
' +
        '' +
        data.name +
        '' +
        '' +
        data.age +
        '' +
        '' +
        data.gender +
        '' +
        '
';
      html += item;
    }
    document.getElementById('content').innerHTML = html;
  }
}

// 綁定事件,點擊按鈕觸發(fā)加載
document.getElementById('getdata-btn').addEventListener('click', function () {
  getData(render);
});

PHP：

query($sql);
 
$data = array();
 
while($row = $res->fetch_array()) {
  $data[] = $row;
}
 
$response = array('status'=>0, 'data'=>$data);
 
echo json_encode($response);

• Share
• Print
• More

  Report Save Info Ger More Info

  View More