用常用的jQuery中的DOM操作，制作留言本,$.get,$.post,$.ajax服务器端交互，用$.ajax实现的jsonp中跨域请求

留言本（jquery版本）

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery-留言板</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  </head>
  <style>
  *{
    margin:0;
    padding:0;
    border:0;
  }
  body{
    background-color: lightslategrey;
  }
  .inputliyan{
    margin-left: 20px;
    padding-top: 12px;
  }
  input,button{
    height:25px;
    line-height: 25px;
  }
  .liuyan{
    margin-left: 20px;
    padding-top: 12px;
  }
  .liuyan  ul  li{
    color:#000000 !important;
    list-style: none;
    line-height: 35px;
    word-spacing: 60px;
  } 
  </style>
  <body>
<div  class="inputliyan"><input  type='text'    name="liuyan"><button>留言</button></div>
<div  class="liuyan">
<ul>
</ul>
</div>
    <script>
     $('button').on('click',function(){
     if($('input[name="liuyan"]').val().length===0){
       if($(this).next('span').length){
        $(this).next('span').text('输入不能为空!');
       }else{
        $("<span></span>").css('color','red').text('输入不能为空!').appendTo($(".inputliyan"));
       }
       return false;
     }
     if($(this).next('span').length) $(this).next('span').html('');
        let  time=new  Date();
        time=time.getFullYear()+'年'+(time.getMonth()+1)+'月'+time.getDate()+','+time.getHours()+':'+time.getMinutes()+':'+time.getSeconds();
        console.log(time);
        ($("<li></li>").html($('input[name="liuyan"]').val()+'  '+time).css('color','cyan').append($("<button>×</button>").on('click',function(){
         $(this).parent().remove();
        }))).appendTo($(".liuyan ul"));
        $('input[name="liuyan"]').val('');
        $('input[name="liuyan"]').focus();
     })
    </script>
  </body>
</html>

效果图：

$.get,$.post,$.ajax服务器端交互

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>$.get,$.post,$.Ajax</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  </head>
  <style>
*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
}
.select:nth-of-type(1){
padding:12px;
background-color: cornsilk;
}
.select  button{
padding:15px;
}
.select:nth-of-type(2){
padding:12px;
background-color:cyan;
}
.select:nth-of-type(1){
padding:12px;
background-color:darkkhaki;
}
.select:nth-of-type(3){
padding:12px;
background-color:dodgerblue;
}
.select:nth-of-type(4){
padding:12px;
background-color:indigo;
}
.select:nth-of-type(5){
padding:12px;
background-color:mediumorchid;
}
  </style>
  <body>
    <div class="select">
      <button  class="get">$.get</button>
      <p></p>
    </div>
    <div class="select">
      <button  class="post">$.post</button>
      <p></p>
    </div>
    <div class="select">
      <button  class="ajax">$.ajax</button>
      <p></p>
    </div>
    <div class="select">
      <button  class="ajaxget">$.ajax&get</button>
      <p></p>
    </div>
    <div class="select">
      <button  class="ajaxjp">ajaxjp</button>
      <p></p>
    </div>
    <script>
      $('.get').on('click',function(){
      $.get('get.php',{id:0},function(data){
      //  console.log(typeof data);
     // data=(typeof  data)==="string"?JSON.parse(data):data;
      $('.get').next().html(data.name);
      $('.get').next().append(data.email).css('color','red');
      });
      })
$('.post').on('click',function(){
$.post('get.php',{id:1},function(data){
//data=(typeof  data)==="string"?JSON.parse(data):data;
console.log(typeof data);
$('.post').next().html(data.name);
$('.post').next().append(data.email).css('color','red');
});
})
$('.ajax').on('click',function(){
$.ajax('get.php',{type:"post",data:"id=2",success:function (data){
$('.ajax').next().html(data.name);
$('.ajax').next().append(data.email).css('color','red');
}});
})
$('.ajaxget').on('click',function(){
$.ajax('get.php',{type:"get",data:{id:3},success:function (data){
$('.ajaxget').next().html(data.name);
$('.ajaxget').next().append(data.email).css('color','red');
}});
})
$('.ajaxjp').on('click',function(){
$.ajax({
  url:'http://word.io/test.php',
  type:"get",
  data:'id=4&jsonp=?',
  dataType:"jsonp",
  jsonpCallback: "show",
  success:function (data){
     data;
   }
})
})
function   show(data){
    $('.ajaxjp').next().html(`${data.name}`);
    $('.ajaxjp').next().append(`${data.email}`).css('color','red');
}
</script>
  </body>
</html>

服务器端：get.php

<?php
header('Content-type: application/json');
$user=Array(
Array("name"=>"张三","email"=>"dong7dong7@123.com"),
Array("name"=>"旺财","email"=>"wangcai@654.io"),
Array("name"=>"薛礼","email"=>"rengui@654.io"),
Array("name"=>"get某某","email"=>"get@654.io"),
);
echo  json_encode($user[$_REQUEST['id']]);
?>

test.php

<?php
header('Content-Type:text/html;charset=utf-8;');
$callback=$_REQUEST['jsonp'];
$user=Array(
Array("name"=>"张三","email"=>"dong7dong7@123.com"),
Array("name"=>"旺财","email"=>"wangcai@654.io"),
Array("name"=>"薛礼","email"=>"rengui@654.io"),
Array("name"=>"get某某","email"=>"get@654.io"),
Array("name"=>"jsonpadding某某","email"=>"jsonpadding@wifi.io"),
);
echo  $callback.'('.json_encode($user[$_REQUEST['id']]).')';
?>

留言本（jquery版本）

效果图：

$.get,$.post,$.ajax服务器端交互

相关文章