zoukankan      html  css  js  c++  java
  • Ajax


    ## ajax():2005年——技术更新跟进,创新超越的能力要有!

    ## xml:可扩展标记语言

    ## json

        浏览器---ajax---服务器

        [1]实现页面无刷新更新数据

        [2]分页技术,加载更多数据

        [3]表单校验

    ## 注意:ajax运行在网络环境下

            即需要有后台

    不是很清晰,或者说灵活应用

        get请求方式:不能提供json对象数据格式

        form表单也是不行,

        只有post方式可以。

    应用:

    //1 POST请求

    app.post('/post', (req, res) => {

    // console.log(111);

    res.send(req.body);

    });

    // 处理POST请求

    //post请求

    var xhr = new XMLHttpRequest();

    xhr.open('post', 'http://localhost:7788/post');

    //设置请求参数格式类型[除非有上传文件的格式不同]

    // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    //json格式

    xhr.setRequestHeader('Content-Type', 'application/json');

    // xhr.send(params);

    xhr.send(JSON.stringify({

    "uname": uname.value,

    "pwd": pwd.value

                }));

    xhr.onload = function() {

    console.log(xhr.responseText);

                };

    //get请求

    //ajax:通过对象;原生ajax使用

    //1 创建ajax对象

    var xhr = new XMLHttpRequest();

    //2 配置 请求方式和请求地址

    xhr.open('get', 'http://localhost:7788/jsonData');

    //3 发送请求

    xhr.send();

    //4 监听事件 onload 接收完整的服务器响应数据

    xhr.onload = function() {

    console.log(xhr.responseText); //服务器返回回来的都是字符串,而不是对象

    //json字符串-->json对象

    var resText = JSON.parse(xhr.responseText);

    document.getElementsByTagName('h1')[0].innerHTML = resText.age;

            };

  • 相关阅读:
    Vmware安装CentOs7.4
    记录一次简单的springboot发送邮件功能
    jenkins 脱机下 安装插件失败
    centos8系统下docker安装jenkins
    Flask快速入门(9) — 请求扩展
    Flask快速入门(8) — 闪现flash
    Flask快速入门(7) — session
    Flask快速入门(6) — 常见的请求与响应参数
    Flask快速入门(5) — 模板渲染
    Flask快速入门(4) — CBV写法与解析
  • 原文地址:https://www.cnblogs.com/macro-renzhansheng/p/13048607.html
Copyright © 2011-2022 走看看