ajax 数据交互

最新推荐文章于 2021-07-29 19:10:35 发布
最新推荐文章于 2021-07-29 19:10:35 发布
阅读量466 收藏
点赞数
文章标签： ajax 数据 函数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Renkx0404/article/details/73927704
版权

首先我们先分装一个ajax 以方便下面使用。

function ajax(option){
  var type=option.type;
  var url=option.url;
  var async=option.async;
  var success=option.success;
  var xml = null;
  if(window.XMLHttpRequest){
     xml = new XMLHttpRequest();
  }else {
     xml = new ActiveXObject("Microsoft.XMLHttp");
  }

  xml.open(type,url,async);
  xml.send();

  xml.onreadystatechange = function (){
    if(xml.readyState == 4){
      if (xml.status==200) {
       // var body=JSON.parse(xml.responseText);//转化为对象类型
         success&&success(JSON.parse(xml.responseText));
      }
    }
  }
}

其次再构建一个html框架，

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script src="./ajax.js"></script>
  <style>
    #swrap{
      width: 1000px;
      margin: 0 auto;
    }
    #list{
      width: 100%;
    }
    #list li{
      width: 300px;
      display: inline-block;
    }
    #list li img{
      width: 100%;
    }
    #box{
      margin-left:560px ;
    }
  </style>
</head>
<body>
  <div id="box">
    <input type="text" name="" value="" placeholder="" id="txt">
    <input type="button" name="" value="提交" id="btn">
    <audio  controls autoplay>
    </audio>
  </div>
  <div id="swrap">
    <ul id="list">
      <li><img src="images/pic7.png" alt=""></li>
      <li><img src="images/pic7.png" alt=""></li>
      <li><img src="images/pic7.png" alt=""></li>
      <li><img src="images/pic7.png" alt=""></li>
      <li><img src="images/pic7.png" alt=""></li>
      <li><img src="images/pic7.png" alt=""></li>
      <li><img src="images/pic7.png" alt=""></li>
      <li><img src="images/pic7.png" alt=""></li>
      <li><img src="images/pic7.png" alt=""></li>
    </ul>
  </div>
</body>
</html>

ajax数据交互：

<script>
    window.onload=function(){
      var obtn=document.getElementById('btn');
      var oTxt=document.getElementById('txt');
      obtn.onclick=function(){
        if(oTxt.value == ''){
          alert('你丫啥啊')
          return false;
        }
      ajax({
         type :'get',
         url:' https://api.imjad.cn/cloudmusic/?      type=search&s='+oTxt.value,
         async:true,
         success: function(data){
            var oul=document.getElementById('list');
            oul.innerHTML='';
            for (var i = 0; i < data.result.songs.length; i++) {
              var li=document.createElement('li');
              var oimg=document.createElement('img');
              oimg.setAttribute('src',data.result.songs[i].al.picUrl) ;
              oimg.setAttribute('data-id',data.result.songs[i].id);
              li.appendChild(oimg);
              oul.appendChild(li);
            }
          }
       })
      var oul=document.getElementById('list');
      var oimg=document.getElementById('img');
      oul.onclick=function(){
        var e=e||window.event;
        var target=e.srcElement||e.target;
          if (target.nodeName=='IMG'){
              // console.log(target.getAttribute('data-id'));
              ajax({
                type:'get',
                url:'https://api.imjad.cn/cloudmusic/?  type=song&id='+target.getAttribute('data-id'),
                async:true,
                success:function(data){
                  var oad=document.getElementsByTagName('audio')[0];
                  oad.setAttribute('src',data.data[0].url)
                }
              })
            }
          }
        }
      }
  </script>
Renkx0404
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ajax的封装
08-10
为了便于以后ajax的应用，现对ajax进行了封装，操作方便。
ajax分装过程
xiaokuangren_的博客
09-22 171
ajax分装过程 一 ajax原生四步 // 创建xhrHttp实例 let xhrHttp if(window.XMLHttpRequest){ //创建Ajax对象 获取浏览器内部的一个XMLHttpRequest对象,创建该对象.(非IE6) xhrHttp= new XMLHttpRequest(); }else{ //ie6 xhrHttp= new ActiveXObject("Microsoft.XMLHTTP"); } // 监听
ajax请求分装
SuperListenter的博客
01-13 936
function AJAX(obj){//做网络请求的时候，以对象形式传递进来 /* //规定:obj里面包含属性有： 1.url 2.type---get还是 post 3.data--前端给后端传递的参数(前端传递的时候以"对象形式") 4.回调函数---success 5.回调函数---error 6.跨域的回调函数---callBack 7.后台接受回调函数的 key 值
简单封装$.ajax() 方法
LWT_博客
07-26 1万+
注意:用此方法必须基于JQuery.min.js 　上实现。 话不多说贴上一个Ｄｅｍｏ：     &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="GBK" /&gt; &lt;title&gt;简单封装$.ajax()方法&lt;/title&gt;
基于ThinkPHP的Ajax数据交互研究.pdf
最新发布
01-06
本文将从 Ajax 技术的介绍开始，分析基于 ThinkPHP 的 Ajax 数据交互技术，并比较传统的 Ajax 数据交互和 ThinkPHP 的 Ajax 数据交互，最后提出 ThinkPHP 的 Ajax 数据交互技术的优势。 Ajax 技术是动态网页技术的...
Struts2和Ajax数据交互示例详解
10-18
Struts2和Ajax数据交互示例详解的主要目标是向读者展示如何在Struts2框架下实现与Ajax技术的数据交互。文档通过实例代码详细介绍了整个过程，对于需要在Web开发中使用这些技术的开发者来说，提供了实际操作的学习...
Javaweb使用cors完成跨域ajax数据交互
08-29
JavaWeb使用CORS完成跨域AJAX数据交互 本文将对CORS的概念和JavaWeb使用CORS完成跨域AJAX数据交互进行详细的介绍。 一、跨域概念 跨域是指浏览器不能执行其他网站的脚本，这是由浏览器的同源策略造成的，是浏览器...
Java中使用json与前台Ajax数据交互的方法
10-22
在Java开发中，前后端数据交互是常见的需求，特别是在构建动态网页时，使用Ajax与后台进行异步数据交换可以提供更好的用户体验。本文将详细介绍如何在Java中使用JSON（JavaScript Object Notation）与前端Ajax进行...
基于Ajax技术的前后端Json数据交互方式实现
chengRantianxia的博客
08-14 1089
浏览器访问网站过程。 第一步：浏览器向DNS服务器发起DNS请求，DNS服务器解析域名后返回域名对应的网站服务器IP地址 第二步：浏览器获取IP地址后向网络服务器发送一个HTTP请求 第三步：网络服务器解析浏览器的请求后从数据库获取资源，将生成的html文件封装至HTTP 响应包中，返回至浏览器解析 第四步：浏览器解析HTTP 响应后，下载html文件，继而根据文件内包含的外部引用文件、图...
Ajax及封装Ajax详解
热门推荐
c__dreamer的博客
05-25 4万+
    首先说道ajax必须要知道JSON，不会JSON的，请点击。    Ajax        说道ajax到底什么是ajax？ ajax是一种创建交互网页应用的一门技术。        ajax的应用场景有：（地图）实时更新，表单验证等等....        ajax的优缺点：            优点：1.实现局部更新（无刷新状态下），2.减轻了服务器端的压力            缺...
Ajax前后端交互操作
weixin_44076712的博客
07-29 247
Ajax前后端请求 以完成ssm整合，自用，仅记录 实体类 @Component @Data @NoArgsConstructor @AllArgsConstructor public class Book { private int bookID; private String bookName; private int bookCount; private String detail; } 前端向后端请求数据库中所有Book的信息 前端 allBook.jsp <
ajax封装
qq_21692693的博客
12-24 1486
(function () { var $ax = function (url, success, error) { this.url = url; this.type = "post"; this.data = {}; this.dataType = "json"; this.async = false; this.success = success; this.e...
Ajax原理及使用方法(前端后台数据交互)
分享，让视野更宽阔
08-10 3万+
学习前端到一个阶段，必定会碰到一个不可避免的问题，即前端跟后端之间到底是怎么进行数据交互的?那么针对这个问题，我们来讨论一下以下三种方法：1、form表单 2、ajax 3、websocket（不讨论） 首先，最原始的，通过form表单以post/get方式提交数据。 当你点击submit按钮时，浏览器会默认把你在input里面输入的数据，以post或get的方式提交到form表单中的acti...
JQuery对AJAX操作的封装
hfhan的博客
12-20 546
1.jQuery对AJAX操作的封装——load 用法：$(‘div’).load(‘1.php’,[‘k=v’],[fn])：$.load()是JQ对js dom中onload函数的封装 作用：创建XHR对象，发起异步请求，把成功响应消息的主体数据(必需是text/html)，追加为当前选定元素的innerHTML。 注意：响应消息必需是HTML片段！当前选定元素已有内容会被替换！ 演示
ajax未分装前JS代码形式
天天的博客
02-25 159
<script> // 创建XMLHttpRequest对象的实例（就是创建异步对象） var xhr = new XMLHttpRequest(); // 监听请求和响应的状态 xhr.onreadystatechange = function(){ // 表示请求完成 //状态等于4时响应完成，但页面404时仍可接收到响应，所以这里要status(页面状态)==200，既页面正常才给接收响应 if(xhr.rea
前后端数据交互——ajax技术
m0_47396944的博客
02-02 3629
在实际开发过程中，前端页面通常需要根据后台数据实现动态生成和实时更新，因此如何实现前后端数据交互成了开发过程中的难题。 现将使用ajax技术解决前后端数据的交互： （1)ajax技术介绍： ajax一个前后台配合的技术，它可以让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xml,http对象，使用此对象与后台通信。jquery将它封装成了一个函数$.ajax()，我们可以直接用这个函数来执行ajax请求。 这个对象为向服务器发送请求和解析服务器响应提供了流畅的
AJAX的实现原理以及封装
u011032902的博客
01-25 1万+
作为一名撸啊撸玩家，Ajax的中文名，让我不禁想起了当年在S3赛季威风凛凛的武器大师，贾克斯！        难得这份熟悉感，学好AJAX（阿贾克斯），应该不是难事。        下面言归正传： 那何为AJAX？        首先我们从名字入手，        AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和
jQuery Ajax前后端使用JSON进行交互
程序员深夜写bug
05-12 1万+
需求： 前端通过jquery Ajax传输json到后端，后端接收json，对json进行处理，后端返回一个json给前端 这里使用servlet的方式 1、采用$.post方法 index.jsp页面 function checkUserid() { $.post( 'Ajax/CheckServlet',//url
ajax数据交互
05-30
使用Ajax技术，可以实现局部刷新、交互式操作等功能。 以下是一个简单的Ajax示例，通过jQuery库实现： ```javascript $.ajax({ url: "/example.php", //请求的URL地址 type: "post", //请求方式 data: {param1:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值