利用pajax+php的技术方案，实现无刷新更新数据，给我一个完整的能运行的demo

• ChatGPT 3     类型 : program   标签 : ajax    
• 634

  利用pajax+php的技术方案，实现无刷新更新数据，给我一个完整的能运行的demo

整理自网络ChatGPT产生之内容，文本内容不具备参考意义，程序内容及代码片段有且仅有借鉴意义。

  

前后端Ajax示例：

html：


    
标题
    

    加载数据


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();
}

// 渲染数据
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;
  }
}

// 绑定事件,点击按钮触发加载
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