2发送ajax带参数(2get_canshu01.html)

游鹄君2025年8月24日大约 1 分钟

html示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>发送ajax请求 带参数</title>
  <style type="text/css">
    #dvs
    {
     width:300px;
     height:360px;
     border:solid 1px blue;
    }
  </style>
</head>
<body>
  <button>get 带参数</button>
  <div id='dvs'></div>
  <script type="text/javascript">
    //单击事件
    //获取按钮元素
    var buts=document.getElementsByTagName('button')[0];
    //获取div元素
    var dvs=document.getElementById('dvs');
 
    var i=10;
 
    //绑定事件
    buts.addEventListener('click',function(){
     //发送ajax
     //1创建ajax对象
     var x = new XMLHttpRequest;
     //2触发事件
     x.onreadystatechange=function()
     {
       //判断
       if(x.readyState == 4 && x.status==200)
       {
         dvs.innerHTML='';
         //console.log(x.responseText);
         //创建img节点
         var imgs=document.createElement('img');
         //第一种方法
         //imgs.src=x.responseText;
         //第二种方法
         imgs.setAttribute('src',x.responseText);
         imgs.setAttribute('width','100%');
         //把img插入到div里面
         dvs.appendChild(imgs);
       }
     }
     //3初始化
     //get传值方式应该在初识化的时候带参数
     x.open('GET','2get_canshu01.php?id='+i,true);
     //4发送
     x.send();
 
     i++;
    })
  </script>
  <script type="text/javascript">
    //单击事件
 
  /*var buts = document.getElementsByTagName('button')[0];
 
  var dvs = document.getElementById('dvs');
 
  var i = 10;
 
  buts.addEventListener('click', function(){
 
 
    //发送ajax
    //1. 创建ajax对象
    var x = new XMLHttpRequest;
 
    //2.触发事件
    x.onreadystatechange = function()
    {
     //判断
     if(x.readyState == 4 && x.status == 200){
 
       dvs.innerHTML = '';
 
       // alert(x.responseText);
 
       // console.log(x.responseText);
       //创建节点 img
       var imgs = document.createElement('img');
 
       imgs.setAttribute('src',x.responseText);
       imgs.setAttribute('width','100%');    
       
       //把img插入到div里面
       dvs.appendChild(imgs);
     }
 
    }
 
    //3.初始化
    x.open('GET','2get_canshu01.php?id='+i, true);
 
    //4.发送
    x.send();
 
    i++;
  })
*/
  </script>
</body>
</html>

php示例代码

<?php
    //echo "haha";
 
    //接收参数
    $id = $_GET['id'];
 
    //根据id的值从数据表goods里面获取数据
 
    //1实例化pdo
    $pdo = new PDO('mysql:host=localhost;dbname=pass;charset=utf8;port=3306','root','123456');
 
    //2准备sql语句
    $sql =  "select * from goods where id={$id}";
 
    //3执行
    $stmt = $pdo-> query($sql);
 
    //4解析出结果
    $res = $stmt->fetch(PDO::FETCH_ASSOC);
 
    echo $res['pic'];