AJAX返回值

AJAX返回值的使用场景

最新推荐文章于 2021-09-01 14:30:08 发布

原创最新推荐文章于 2021-09-01 14:30:08 发布 · 634 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#AJAX

AJAX 专栏收录该内容

4 篇文章

订阅专栏

AJAX返回值常用于不同场景：字符串如简短状态信息或JSON格式数据，适用于返回数组或对象；HTML代码适合大块数据更新，减少DOM操作；而XML则在处理大量格式化数据时发挥作用，客户端通过responseXML解析。

AJAX返回值应用场景

1. 字符串:

短字符串:
应用场景: 一般返回较短,具有标志的字符串,如,0/1, succ/fail, 已注册,未注册等.

    function chk() {
        var xhr = new XMLHttpRequest();
        var uri = '01.php?username=' + document.getElementsByTagName('input')[0].value;
        xhr.open('get',uri,true);

        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4) {
                if(xhr.responseText == 1) {
                    alert('用户名已被占用');
                } else if(xhr.responseText == 0) {
                    alert('用户名可用');
                } else {
                    alert('异常错误');
                }
            }
        };

        xhr.send(null);
    }

$username = $_GET['username'];
$arr = array('zhangsan','lisi','wangwu');
echo in_array($username,$arr)?1:0;

Json格式字符串:
应用场景: 返回数组或对象等格式化数据

<h1>商品编辑</h1>
 43         商品id：<input type="text" name="goods_id" onblur="mod();" /><br />
 44         商品名称：<input type="text" name="goods_name" /><br />
 45         商品价格：<input type="text" name="shop_price" /><br />
 46         商品库存：<input type="text" name="goods_number" /><br />
 47         <input type="submit" value="修改" />

 9 function mod(){
 10  var gid = document.getElementsByName('goods_id')[0].value;
 11  var patt = /^\d+$/;
 12  if(!patt.test(gid)){
 13   alert('请输入正确的id');
 14   return false;
 15 }
 16  var xhr = new XMLHttpRequest();
 17  var uri = '05.php?goods_id=' +gid;
 18  xhr.open('get',uri,true);
 19  xhr.onreadystatechange = function(){
 20         if(xhr.readyState == 4){
 21                 var rs = eval('('+xhr.responseText+')');
 22         if(rs.errno != 0){
 23                 alert(rs.errstr);
 24                 return false;
 25         }
 26         document.getElementsByName('goods_name')[0].value = rs.name;
 27         document.getElementsByName('shop_price')[0].value=rs.price;
 28         document.getElementsByName('goods_number')[0].value=rs.number;
 29 }
 30 };
 31  xhr.send(null);
 32
 33 }


  1 <?php
  2 $goods_id = $_GET['goods_id'] + 0;
  3 if(!is_int($goods_id)){
  4         $info = array('errno'=>1,'errstr'=>'id有误');
  5         echo json_encode($info);
  6         exit;
  7 }
  8 $conn = mysql_connect($host,$user,$pwd);
  9 $sql = 'use **';
 10 mysql_query($sql,$conn);
 11
 12 $sql = 'set names utf8';
 13 mysql_query($sql,$conn);
 14
 15 $sql = 'select name,price,number from person where id ='.$goods_id;
 16 $rs = mysql_query($sql,$conn);
 17
 18 $goods = mysql_fetch_assoc($rs);
 19
 20 //var_dump($goods);
 21
 22 if(empty($goods)){
 23         $info = array('errno'=>2,'errstr'=>'无此商品');
 24         echo json_encode($info);
 25 }else{
 26         $info = $goods;
 27         $info['errno'] = 0;
 28         $info['errstr'] = '正确';
 29         echo json_encode($info);
 30         exit;
 31 }

javascript object notation, javascript原生对象格式
Html代码: 一整段html代码
应用场景: 当页面上有大块的数据变化时, 用数组要牵涉到大量的DOM操作,
这时,可以用PHP+Html,预先生成需要的html代码, 然后以字符串形式返回.
再innerHTML到页面中去.


  9 function top3(type){
 10         var xhr = new XMLHttpRequest();
 11         var uri = '04.php?type='+type;
 12         xhr.open('get',uri,true);
 13
 14         xhr.onreadystatechange = function(){
 15         if(xhr.readyState == 4){
 16         var rs = xhr.responseText;
 17         document.getElementById('show').innerHTML = rs;
 18 }
 19
 20 };
 21         xhr.send(null);
 22 }
 23
 24
 25 </script>
 26
 27 <style type="text/css">
 28 </style>
 29 </head>
 30     <body>
 31         <input type="button" value="搞笑三人组" onclick="top3('is_fun');">
 32         <input type="button" value="杀猪三人组" onclick="top3('is_pig');">
 33         <input type="button" value="肌肉三人组" onclick="top3('is_ma');">
 34
 35         <div id="show">
 36         </div>
 37     </body>
 38 </html>

  1 <?php
  2 $type = $_GET['type'];
  3 if(!in_array($type,array('is_pig','is_ma','is_fun'))){
  4         echo 'error';
  5         exit;
  6 }
  7
  8 $dbh = new PDO("$dbms:host=$host;dbname=$dbname",$user,$pwd);
  9 $rs = $dbh->query("select id,name from person where $type = 1 limit 3");
 10 $list = array();
 11 while($row = $rs -> fetch(PDO::FETCH_ASSOC)){
 12 $list[] = $row;
 13 }
 14 //var_dump($list);
 15 ?>
 16
 17 <table border="1">
 18         <tr><td>id</td><td>name</td></tr>
 19         <?php foreach($list as $v) { ?>
 20         <tr><td><?php echo $v['id'] ?></td><td><?php echo $v['name'] ?></td></tr>
 21         <?php }?>
 22
 23
 24
 25
 26 </table>
 27