精华内容
下载资源
问答
  • ajax请求数据渲染页面
    千次阅读
    2020-12-14 14:37:42
    <!DOCTYPE html>
    <html lang="en">
    <style>
        span {
            display: inline-block;
            width: 100px;
            height: 30px;
            border: 1px solid red;
            line-height: 30px;
            text-align: center;
            font-size: 10px;
        }
    
        #lengther {
            width: 280px;
        }
    </style>
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
    
        <button id="btn">生成随机数据</button>
        <article id="art"></article>
    </body>
    <!-- https://www.bootcdn.cn/ 猫云:这个网站可以查看如何开源技术的链接 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
    <script>
        // 使用 mock 来拦截请求
        Mock.mock(/users/, function () {
            return Mock.mock({
                'list|5': [{
                    'id|+1': 1, // id 从1开始自增
                    'name': '@cname()', // 随机生成一个中文名
                    'addr': '@county(true)', // 随机生成一个国内的地址
                    'age|18-30': 1, // 生成一个年龄,年龄的取值范围 18-30
                    'birth': '@date', // 生成一个随机日期
                    'gender': /[男女]/, // 性别
                    'email': '@email', // 生成一个邮箱
                    'hobby|1': ['玩游戏', '看电影', '睡觉'],
                    'time': '@date("yyyy-MM-dd")',
                    'telephone': /^1[3-9]\d{9}$/
                }]
            })
        })
        btn.onclick = function () {
            // 1. 创建 xhr 对象
            let xhr; // 这个变量拿来装 xhr 对象
            if (window.XMLHttpRequest) {
                // firefox,chrome,opera,safari 等这些浏览器
                xhr = new XMLHttpRequest();
            } else {
                // 说明是 IE6,IE5 及其以下版本
                xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }
            // 2. 发送请求
            xhr.open("GET", "/users", true);
            xhr.send(null);
    
            // 3. 监听xhr回来没有
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // JSON.parse——JSON格式字符串转对象
                    let arr = JSON.parse(xhr.responseText);
                    // console.log(arr.list[0]);
                    let str = '';
                    str += `
                    <h1>学生数据</h1>
                    <span>序列号</span>
                    <span>名字</span>
                    <span id="lengther">地址</span>
                    <span>年龄</span>
                    <span>出生日期</span>
                    <span id="lengther">邮箱</span>
                    <span>性别</span>
                    <span>爱好</span>
                    <span>电话</span>
                    `
    
                    for (let i = 0; i < arr.list.length; i++) {
                        str += `
                       <div >
                           <span >${arr.list[i].id}</span> 
                           <span >${arr.list[i].name}</span>
                           <span  id="lengther">${arr.list[i].addr}</span>
                           <span >${arr.list[i].age}</span>
                           <span >${arr.list[i].birth}</span>
                           <span   id="lengther">${arr.list[i].email}</span>
                           <span >${arr.list[i].gender}</span>
                           <span >${arr.list[i].hobby}</span>
                           <span >${arr.list[i].telephone}</span>
                        <div>
                            `
                    }
                    art.innerHTML = str;
                }
            }
    
        }
    </script>
    
    </html>
    
    更多相关内容
  • <p>jquery ajax请求数据渲染页面css不生效,但是用任意方式改变窗口大小后就有了,求解决方法</p>
  • 主要介绍了jQuery+Ajax+js实现请求json格式数据渲染到html页面操作,结合实例形式分析了jQuery+Ajax请求json格式数据渲染到html页面相关步骤与操作技巧,需要的朋友可以参考下
  • <input type=text name=dishes value= class=seek_product placeholder=请输入菜名/> <button type='button' class=btn_nor onclick=seek_product()>搜索</button>...th width=70%
  • Ajax请求数据渲染

    2020-12-18 12:07:47
    Ajax请求数据渲染 什么是Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。 异步 JavaScript 和 XML 或者是 HTML(标准通用标记语言的子集) ...

    什么是Ajax

    即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。

    • 异步 JavaScript 和 XML 或者是 HTML(标准通用标记语言的子集)
    • Ajax 是一种用于创建快速动态网页的技术
    • Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

    我认为的Ajax

    在这里插入图片描述

    特点

    只能访问同源 URL,也就是域名相同、端口相同、协议相同。如果请求的 URL 与发送请求的页面在任何方面有所不同,则会抛出安全错误。

    • 同源策略能够保证web应用的安全性,防止恶意脚本攻击你的机器。
    • 如果处于非同源状态,默认会被浏览器将响应拦截。

    使用Ajax的步骤

    • 创建对象

      const xhr = new XMLHTTpRequest;
      
    • 设置open()方法:不会发送请求,为发送请求做好准备。

      xhr.open('参数1','参数2','参数3')
      // 参数1:请求类型 get/post
      // 参数2:请求URL 代码所在位置的相对路径或者绝对路径
      // 参数3:请求是否异步的布尔值。true指异步,false指同步。
      // 最好使用异步请求,这样可以不阻塞JavaScript 代码继续执行
      
    • 发送请求send()

      xhr.send('参数')
      // 参数为一个值:作为请求体发送的数据。
      // 不需要发送请求体------>参数设置为null(浏览器兼容问题)
      
    • 监听事件

      xhr.onreadystatechange = function() {// readystatechange 事件处理程序没有event对象。
          if (xhr.readyState === 4) {// readyState XHR 对象有一个 readyState 属性,表示当前处在请求/响应过程的哪个阶段。
              if (xhr.status === 200) {// status 属性 响应的http状态码。
                  console.log(xhr.responseText);// responseText:作为响应体返回的文本
              }
           }
      }
      

    Ajax使用说明书

    XHR对象

    XHR 为发送服务器请求和获取响应提供了合理的接口。这个接口可以实现异步从服务器获取额外数据,意味着用户点击不用页面刷新也可以获取数据。通过 XHR 对象获取数据后,可以使用 DOM 方法把数据插入网页。

    • 所有现代浏览器都通过XMLHttpRequest 构造函数原生支持 XHR 对象

      let xhr = new XMLHttpRequest();
      

    XHR 对象的方法和属性

    • readyState 属性:当前处在请求/响应过程的哪个阶段。

    • status 属性:响应的 HTTP 状态。

    // 收到响应后,第一步要检查 status 属性以确保响应成功返回.成功后,此时,responseText 或 responseXML(如果内容类型正确)属性中会有内容。为确定下一步该执行什么操作,最好检查 status 而不是 statusText 属性,因为后者已经被证明在跨浏览器的情况下不可靠。
    
    • responseXML 属性:如果响应的内容类型是"text/xml"或"application/xml",那就是包含响应数据的 XML DOM 文档。

    • responseText 属性:作为响应体返回的文本。

      // 无论是什么响应内容类型,responseText 属性始终会保存响应体,而 responseXML,则对于非 XML 数据是 null
      // 所以我们使用responseText属性
      
    • statusText 属性:响应的 HTTP 状态描述。

    • open() 方法:
      open ( ) 有三个参数 (method , url , boolean) ;

    method 对应的取值是“GET”和“POST”(“GET”方式的安全性比“POST”的要低,包含机密信息的话,建议用post数据提交方式;在做数据查询是,建议用“GET”方式,而在做数据添加、修改、删除时,建议用“POST”方式 ) .

    url 是 文件在服务器上的位置 .

    boolean 的取值是“true”和“false”. (boolean 取值为“true” 的时候,服务器的请求是异步的,也就是脚本执行send()方法后不等待服务器的执行结果,继续执行脚本代码 ; beelean取值为“false”的时候,服务器的请求是同步的 , 也就是脚本执行send() 后等待服务器的执行结果,若在等待过程中超时,则不再等待,继续执行后面的脚本代码).

    • send() 方法:
      一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接使用GET方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null。

    例如 :

       var url = "login.jsp?user=XXX&pwd=XXX";
    
       xmlHttpRequest.open("GET",url,true);
    
       xmlHttpRequset.send(null);
    

    此外,也可以使用send方法传递参数。使用send方法传递参数使用的是POST方法,需要设定Content-Type头信息,模拟HTTP POST方法发送一个表单,这样服务器才会知道如何处理上传的内容。参数的提交格式和GET方法中url的写法一样。设置头信息前必须先调用open方法。

    例如:

       xmlHttpRequest.open("POST","login.jsp",true);
    
       xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
    
       xmlHttpRequest.send("user="+username+"&pwd="+password);
    

    需要注意的是根据提交方式的不同,两种提交方式分别调用后台的doGet方法和doPost方法。

    open()方法

    不会发送请求,为发送请求做好准备。

    get/post 请求类型不同点

    • GET在浏览器回退时是无害的(因为读取缓存),而POST会再次提交请求。
    • GET产生的URL地址可以被Bookmark,而POST不可以。
    • GET请求会被浏览器主动cache,而POST不会,除非手动设置
    • GET请求只能进行url编码,而POST支持多种编码方式。
    • GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留。
    • GET请求在URL中传送的参数是有长度限制的,而POST么有。
    • 对参数的数据类型,GET只接受ASCII字符,而POST没有限制。
    • GET比POST更不安全,因为参数直接暴露在URL上,所以不能用来传递敏感信息。
    • GET参数通过URL传递,POST放在Request body中。

    get 请求

    get方法,那么在url地址中可能存在参数,参数是以?和& 进行拼接。

    xhr.open('get','08.php?name=zhangsan&age=14',true);
    xhr.send();
    

    post 请求

    需要传递的参数应该通过send()方法进行传递。同时需要设置一下数据传输格式

    xhr.open('post','08.php',true);
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");// 要写出表单的默认值
    xhr.send("name=zhangsan&age=14");
    

    readyState

    表示当前处在请求/响应过程的哪个阶段。

    • 0:未初始化(Uninitialized)。尚未调用 open()方法。
    • 1:已打开(Open)。已调用 open()方法,尚未调用 send()方法
    • 2:已发送(Sent)。已调用 send()方法,尚未收到响应。
    • 接收中(Receiving)。已经收到部分响应。
    • 完成(Complete)。已经收到所有响应,可以使用了。

    status

    响应的 HTTP 状态

    • 2xx:表示成功。此时,responseText 或 responseXML(如果内容类型正确)属性中会有内容
    • 304:表示资源未修改过,是从浏览器缓存中直接拿取的。当然这也意味着响应有效
    // 为确保收到正确的响应,检查以下状态。
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
    	alert(xhr.responseText);
    } else {
    	alert("Request was unsuccessful: " + xhr.status);
    }
    

    responseText

    作为响应体返回的文本。

    展开全文
  • 利用Ajax对接口将数据渲染页面

    千次阅读 2021-10-02 20:28:47
    (1)在Js文件中定义一个获取数据的函数,根据接口文档来写Ajax,判断数据是否获取成功,成功后将步骤2的代码贴上去这样就将数据渲染页面中啦 (2)里面的具体数据还是要根据接口的名字通过标准语法来添加,千万...

    步骤
    1.将要渲染数据的模板的大体框架搭好
    2.引入art-template引入模板,在Js文件中通过函数template(‘id选择器的名字’,要渲染的数据)并将其赋值给一个变量,将该变量放到我们写好的模板中[通过JQuery中的html来添加]

    3.上述模板都搭建好后,就开始写js函数啦
    (1)在Js文件中定义一个获取数据的函数,根据接口文档来写Ajax,判断数据是否获取成功,成功后将步骤2的代码贴上去这样就将数据渲染到页面中啦
    (2)里面的具体数据还是要根据接口的名字通过标准语法来添加,千万不要忘记调用函数
    下面附上我的代码
    HTML代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="./index.css">
        <script src="../Code/案例图书馆管理.html/jquery-3.5.1.js"></script>
      <script src="./index.js"></script>
       <script src="../表单的监听事件/template-web.js"></script>
    </head>
    <body>
        <div id="news-list">
       
    </div>
        <!-- 定义template模板 -->
       <script type='text/html' id="tpl-news">
        <div id="news-item">
            {{each data}}
            <div class="right">
                <img src="{{'http://www.liulongbin.top:3006'+$value.img}}" alt="">
            </div>
            <div class="left">
                <h3>{{$value.title}}</h3>
                <span>
                   
                    <ul>
                        {{each $value.tags}}
                        <li>{{$value}}</li>
                        {{/each}} 
                    </ul>
                   
                </span>
                <div class="bottom">
                    <span>{{$value.source}}{{$value.time}}</span>
                    <span>评论数{{$value.cmtcount}}</span>
                </div>
            </div>
        </div>
        {{/each}}
       </script>
    </body>
    </html>
    

    CSS代码

    #news-list{
        width: 600px;
        height: 100%;
    }
    #news-item{
        width: 600px;
        height: 200px;
        border: 1px solid #ccc;
    
    }
    .right{
        width: 150px;
        height: 150px;
        background-color: gray;
        margin-top:10px;
        margin-left: 10px;
        float: left;
    }
    img{
        width: 150px;
        height: 150px;
    }
    .left{
        width: 430px;
        height: 200px;
        margin: left 10px;
    
        float: right;
    
    }
    ul{
        list-style: none;
        margin-top: 60px;
    }
    li{
        display: block;
        float: left;
        font-size: 10px;
        margin-left: 20px;
        width: 50px;
        height: 20px;
        background-color: #ccc;
        border-radius: 8px;
        text-align: center;
       line-height: 20px
    
    }
    .bottom{
        width: 100%;
        height: 20px;
    
        margin-top: 130px;
        font-size: 10px;
    }
    .bottom span:first-child{
        float: left;
    }
    .bottom span:last-child{
        float: right;
    }
    

    js代码

    $(function(){
        //  获取新闻列表的函数
        function getNewsList(){
            $.ajax({
                method:'GET',
                url:'http://www.liulongbin.top:3006/api/news',
                data: {},
                success:function(res){
                    if(res.status!=200){
                        alert('新闻列表获取失败')
                    }
                    // 将tag属行改成字符串数组
                    for(var i=0;i<res.data.length;i++){
    res.data[i].tags=res.data[i].tags.split(',')
                    }
                    console.log(res);
                    var htmlstr=template('tpl-news',res)
                 $('#news-list').html(htmlstr)
                }
    
            })
        }
        getNewsList();
    })
    
    展开全文
  • 一、ajax的定义 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML) ...(1)将下面的请求到的数组渲染页面中 (2)主要代码 <ul id="sendList"></ul> <script type="text/java

    一、ajax的定义
    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)
    AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
    AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
    二、例子
    (1)将下面的请求到的数组渲染到页面中
    在这里插入图片描述
    (2)主要代码

    <ul id="sendList"></ul>
    <script type="text/
    展开全文
  • 通过ajax请求数据后,进行页面渲染。文件介绍1.goods.json,用于模拟后台接口数据{"cursor": 0,"size": 40,"page": 0,"result": [{"price": "1000","name": "小米手机","imgUrl": "img/1.png"},{"price": "2000",...
  • python 零基础学习篇
  • 主要介绍了基于iframe实现ajax跨域请求,并获取网页中ajax数据,如何利用网页ajax请求暴露出来的接口去抓取网页数据?需要的朋友可以参考下
  • 主要介绍了Ajax异步请求后台数据进行动态分页功能,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
  • 实现原理:点击页面按钮,通过Ajax提交请求到后台,后台接收请求后进行数据库操作,然后返回数据到前台并进行页面渲染 动态加载更多数据 代码实现 //1.页面布局 <input type="hidden" class="tip" value="1"&...
  • js通过AJAX获取后台数据渲染页面

    万次阅读 2019-06-02 18:22:41
    1.GET获取数据 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...AJAX发送GET请求并传递参数</title> </head> <body> <ul id="list">...
  • 下面小编就为大家分享一篇jQuery中ajax获取数据赋值给页面的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 记录一个简单的demo,关于ajax请求解析json数据渲染在前端界面的~共计在线离线$.ajax({url: "data.json",type: "GET",dataType: "json",success: function(data) {console.log(JSON.stringify(data))// 显示在线离线...
  • 获取后端数据后,进行前端的页面渲染数据读到了,渲染却失败了...以上这篇解决jquery的ajax调取后端数据成功却渲染失败的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
  • jQuery的ajax获取数据渲染页面

    万次阅读 多人点赞 2019-04-22 15:40:50
    一、ajax请求方式 post $.ajax({ //请求方式 type:'POST', //发送请求的地址 url:'xxxxxx', //服务器返回的数据类型 dataType:'json', //发送到服务器的数据,对象必须为key/value的格式,jquery...
  • 层叠轮播图 ajax请求数据动态渲染问题。
  • 原生js的ajax数据渲染

    2021-08-08 03:52:14
    ajax应用不只是页面功能的提升,也是性能优化的一种方式。兼容这块的话就是其ajax对象,在ie和其他浏览器的不同,那么现在基本上w3c已经给出了兼容的写法var xmlhttp;if(window.XMLHttpRequest){xmlhttp=new ...
  • jQuery ajax请求渲染数据在前端页面

    万次阅读 2018-12-07 11:37:09
    &lt;tbody class="cuWuMa"&gt; &...第二步,异步请求( interfaceId 传递参数)  $.ajax({  url: "/CatalogApiDetail/getCatalogInerfaceStatusList",  ...
  • 本文通过实例代码给大家介绍了jQuery+Ajax请求本地数据加载商品列表页并跳转详情页,需要的朋友可以参考下
  • var newsData = '';var mydata = {"pageNum":obj.curr,"pageSize":"5"}; //参数newsData = get... //通过ajax获取数据pageNum = newsData.pageNum;$(".news_content").html(showList(newsData.list)); //渲染页面...
  • 前言 在日常的开发中,从服务器端异步获取数据并渲染是相当高频的操作。...本文将会介绍如何使用React的新特性Hook来编写组件并获取数据渲染数据渲染 先来看一个数据渲染的简单demo import Reac
  • ajax请求数据动态渲染表格

    千次阅读 2018-07-05 11:31:00
    1 $.ajax({ 2 url: "/flow/userTaskFileShow.cc", 3 data: {"processDefinitionId": pdid, "processInstanceId": pid, "taskId": n.taskId}, 4 dataType: "json&...
  • 页面dom结构如下姓名: {{msg.name}}年龄: {{msg.old}}地址: {{msg.address}}id: {{msg.user_id}}删除jsvar app = new Vue({el:'#app',data:{msg:{name:'zhangsan',old:'18',...}},//可以将渲染数据的操作放...
  • jQuery+ajax请求数据渲染到前端界面

    千次阅读 2020-05-11 18:39:17
    作为一个前端开发,在日常工作中,会不断的请求接口,调用接口,再对接口的数据进行一定的处理,渲染在前端界面,尤其是在今天前后端分离的时代,这项技能是每个前端开发必备~ 这里就简单的记录工作之中遇到的一些...
  • 第三种: 可以用网上mvvm框架,数据绑定比如:angular ,vue等 第四种: 模板的比如 (template.js) 我自己写个小例子,不要喷我啊 <!DOCTYPE ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 53,203
精华内容 21,281
热门标签
关键字:

ajax请求数据渲染页面