ajax ajax获取数据的处理和实例_ajax获取的数据调到一个方法-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35187942/article/details/85727005

本文详细介绍了如何使用PHP生成JSON数据，并通过AJAX进行数据的获取与解析。展示了从数组转换为JSON字符串，再到客户端解析JSON数据的全过程，包括错误处理与数据展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
$arr1 = array('bai','qi','liuliu');
echo json_encode($arr1);
?>

<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);

$arr2 = array('username' =>'haha' , 'age'=>12);
echo json_encode($arr2);

//stringify 可以把一个对象转成对应字符串
       var arr = [1,2,3];
       alert(JSON.stringify(arr));
       </script>

var aa = {age:100};
alert(JSON.stringify(aa));

//parse:可以把字符串转成对应对象
var b = '[1,2,3]';
alert(JSON.parse(b));

var c = '{"age":100}'; //必须带双引号
alert(JSON.parse(c).age);

数据获取实例：

ajax5.html

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script>
       window.onload = function(){
           var oBtn = document.getElementById("btn");
           oBtn.onclick = function(){
               var xhr = null;
                try{
                    xhr = new XMLHttpRequest();
                }catch(e){
                    xhr = new ActiveXObject('Microsoft.XMLHTTP');
                }
               xhr.open('GET','2.php',true);
               xhr.send();
               xhr.onreadystatechange = function(){
                   if(xhr.readyState == 4){
                       if(xhr.status == 200){
                           var data = JSON.parse(xhr.responseText);
                           var oUl = document.getElementById('aul');
                           var html = '';
                           for(var i = 0;i<data.length;i++){
                               html +='<li><a href="">'+data[i].title+'</a>[<span>'+data[i].date+'</span>]</li>';
                           }
                       oUl.innerHTML = html;
                       }else{
                           alert('出错了' + xhr.status);
                       }
                   }
               }
           }
       }
       </script>
   </head>
   <body>
       <input id="btn" type="button" value="按钮">
       <ul id="aul"></ul>
   </body>
</html>

2.php

<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);

$news = array(
array('title' =>'那么就要考虑下JDK的版本了具体对应的A' , 'date'=>'2019-1-2'),
array('title' =>'那么就要考虑下JDK的版本了具体对应的b' , 'date'=>'2019-1-3'),
array('title' =>'那么就要考虑下JDK的版本了具体对应的c' , 'date'=>'2019-1-4'),
array('title' =>'那么就要考虑下JDK的版本了具体对应的d' , 'date'=>'2019-1-5'),
array('title' =>'那么就要考虑下JDK的版本了具体对应的e' , 'date'=>'2019-1-6'),
);
?>

ajax获取数据封装

ajax5.html

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script src="ajax.js"></script>
       <script>
       window.onload = function(){
           var oBtn = document.getElementById("btn");
           oBtn.onclick = function(){

               ajax('get','2.php','',function(data){
                           var data = JSON.parse(data);
                           alert(data);

                           var oUl = document.getElementById('aul');
                           var html = '';

                           for(var i = 0;i<data.length;i++){
                               html +='<li><a href="">'+data[i].title+'</a>[<span>'+data[i].date+'</span>]</li>';
                           }
                       oUl.innerHTML = html;
               });
//               setInterval(function(){
//                   ajax();
//               },1000)
           }
       }
       </script>
   </head>
   <body>
       <input id="btn" type="button" value="按钮">
       <ul id="aul"></ul>
   </body>
</html>

2.php

<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);

               xhr.open(method,url,true);
               if(method == 'get'){
                   xhr.send();
                   alert( xhr.responseText);
               }else{
                   xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
                   xhr.send(data);
               }


               xhr.onreadystatechange = function(){
                   if(xhr.readyState == 4){
                       if(xhr.status == 200){
                           alert( xhr.responseText);
                           success && success(xhr.responseText);

                       }else{
                           alert('出错了' + xhr.status);
                       }
                   }
               }
}