Ajax+JSON学习二

这篇具有很好参考价值的文章主要介绍了Ajax+JSON学习二。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Ajax+JSON学习二


前言


三、前后端数据交互

3.1. GET请求

GET 请求一般用于信息获取,它没有请求主体,而是使用 URL 传递参数(即:传递数据给后台)。

GET 传递参数的方式,分两步:

  1. 对所需发送的数据(具有名称和值)执行普通的 URL 编码,即:由一对对 “名称=值” 组成(称为:名/值对),每一对之间用 “&” 拼接,如 “name=value&name=value&…&name=value”;
  2. 由于 名/值对 会附加在 URL 地址后面,因此在这串字符参数的最前面需要添加个 “?”,表示 URL 的 查询参数 开始。
// GET请求的后端接口
var url = "/statics/demosource/demo_get_json.php";

// 获取用户输入的表单数据
var country = document.getElementById("country").value,
    city = document.getElementById("city").value;

// 将需要传递的参数拼接为 "名称=值" 对的形式
var query = "country=" + country + "&city=" + city;

// 在 query 前面添加个 "?",再拼接后端接口
var queryURL = url + "?" + query;

// 发起GET请求:使用拼接好的 queryURL
ajaxGet(queryURL);

扩展:因 JavaScript 对象数据是键值对的形式,它与上述的名值对具有类似的性质,因此在 Ajax 的应用中,传递的数据通常直接来自一个 JavaScript 对象,这时只需遍历这个 JavaScript 对象,将每一个键值对按 “名称=值” 的形式进行拼接即可。

function urlencodeData (data) {
    if (!data) return "";

    var pairs = [];    // 存储名/值对
    for (var name in data) {
        if (!data.hasOwnProperty(name)) continue;        // 如果是继承属性则跳过
        if (typeof data[name] === "function") continue;  // 如果是方法则跳过

        // 将 null 与 undefined 改为空字符串
        var value = (data[name] === null || data[name] === undefined) ? "" : data[name].toString();

        // encodeURIComponent 用于对空格、中文等特殊字符进行 URI 编码
        pairs.push(encodeURIComponent(name) + "=" + encodeURIComponent(value));
    }

    return pairs.join("&");
}

3.2. POST请求

POST 请求一般用于修改服务器上的资源,它需要发送一个请求主体,客户端传递给服务器的数据就包含在这个请求主体中。

前置知识:"Content-Type"请求头用于设置请求主体的编码格式。

POST 请求使用 表单编码 的方式来发送数据的关键步骤:

  1. 对所需发送的数据(具有名称和值)执行普通的 URL 编码,即:像 GET 请求那样拼接为 名/值 对的形式;
  2. 将"Content-Type"请求头的值设置为"application/x-www-form-urlencoded"。

JSON 是一种轻量级的前后端数据交换格式,直接使用JSON.stringify原生 API 即可实现 JSON 编码,比表单编码的方式更加快捷。

POST 请求使用 JSON编码 的方式来发送数据的关键步骤:

  1. “Content-Type"请求头的值需要为"application/json”;
  2. 对请求主体进行序列化,在 JavaScript 中可使用JSON.stringify完成这步操作。
// 获取用户输入的表单数据
var country = document.getElementById("country").value,
    city = document.getElementById("city").value;

// 将数据转换为 JavaScript 对象
var data = {
    country : country,
    city : city
}

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    // ... ... 省略事件处理程序
}

// 指定 POST 请求
xhr.open("POST", "/statics/demosource/demo_json_data.php");

// 设置请求主体的编码方法
xhr.setRequestHeader("Content-Type", "application/json");

// 编码请求主体并发送
xhr.send(JSON.stringify(data));
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tryrun 11</title>
</head>
<body>
    <div id="form">
        <label for="country">国家:<input type="text" name="country" id="country"></label>
        <label for="city">城市:<input type="text" name="city" id="city"></label>
    </div>
    <hr>
    <div>你查询的国家是:<span id="ipt_country"></span></div>
    <div>你查询的城市是:<span id="ipt_city"></span></div>
    <br>
    <button type="button" id="search">查询</button>
    (查询成功后会把你输入的值显示在上方)

    <script>
        var oSearch = document.getElementById("search"),
            oIpt_country = document.getElementById("ipt_country"),
            oIpt_city = document.getElementById("ipt_city");

        oSearch.onclick = function () {
            var country = document.getElementById("country").value,
                city = document.getElementById("city").value;

            var query = "country=" + country + "&city=" + city;

            var xhr = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
                        var res = JSON.parse(xhr.responseText);
                        oIpt_country.innerText = res.params.country;
                        oIpt_city.innerText = res.params.city;
                    }
                }
            }

            xhr.open("POST", "/statics/demosource/demo_post_json.php");
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(query);
        }
    </script>
</body>

3.3. jQuery 中的 Ajax

jQuery 是一个 JavaScript 工具库,它封装了 JavaScript 常用的功能代码,包括我们刚刚学完的 Ajax。

jQuery 中,Ajax 常见的请求方式有以下几种:

$.ajax(url, options)
$.get(url, data, callback, dataType)
$.post(url, data, callback, dataType)
$.getJSON(url, data, callback)
$.getScript(url, callback)
jQuery元素.load(url, data, callback)

// 使用jQuery发起ajax请求
$.ajax("/statics/demosource/demo_get_json.php", {
    //请求类型
    type: "GET",
    //要发送的数据
    data: {
        country: country,
        city: city
    },
    //数据格式
    dataType: "json",
    //请求成功后执行
    success: function (res) {    // res为响应成功返回的数据
        oIpt_country.innerText = res.params.country;
        oIpt_city.innerText = res.params.city;
    },
    //请求失败后执行
    error: function (res) {    // 这里的res为响应失败返回的数据
        alert("请求失败:" + res.status);
    }
});

3.4. Ajax 的替代品:fetch

Fetch API 是随 ES6 发展而出现的一个 JavaScript 原生接口,与 Ajax 一样允许开发者异步发起 HTTP 请求,但却以更加简单明了的调用方式、基于 Promise 的数据处理方式被称作是 Ajax 的替代品。

fetch("/statics/demosource/demo_json_data.php", {
    method: "POST",
    header: new Headers({"Content-Type" : "application/json"}),
    body: JSON.stringify(data)
})
.then(function (res) {
    return res.ok ? res.json() : Promise.reject(res);
})
.then(function (data) {
    oIpt_country.innerText = data.country;
    oIpt_city.innerText = data.city;
})
.catch(function (res) {
    alert("请求失败:" + res.status);
})

3.5. 小结

通过学习 Ajax,明白了:XMLHttpRequest对象其实就是 HTTP 规范在客户端 JavaScript 中的实现,一次 HTTP 请求,就对应着一个XMLHttpRequest实例,在这个实例上,可以取到 HTTP 协议中规定的各种协议属性。

四、JSON

4.1. JSON简介

JSON = JavaScript Object Notation,意思是:JavaScript 对象表示法,是一种轻量级的数据交换格式。

JSON 是 JavaScript 的子集,它利用了 JavaScript 中的一些模式来表示结构化数据,是在 JavaScript 中读写结构化数据的更好方式。

关于 JSON,要明白它只是一种数据格式,独立于编程语言,虽然与 JavaScript 具有相同的语法形式,但并不是只有 JavaScript 才能使用 JSON,很多编程语言都有针对 JSON 的解析器和序列化器。

4.2. JSON 语法规则

JSON 的语法可以表示以下三种类型的值:

  1. 简单值:使用与 JavaScript 相同的语法,可以在 JSON 中表示number、string、boolean 与 null,但 JSON 不支持 JavaScript 中的特殊值undefined;
  2. 对象:对象作为一种复杂数据类型, 表示的是一组无序的键值对,而每个键值对中的值可以是简单值,也可以是复杂数据类型的值;
  3. 数组:数组也是一种复杂数据类型,表示一组有序的值的列表,数组的值也可以是任意类型 —— 简单值、对象 或 数组。

注意:
JSON字符串 与 JavaScript字符串 的最大区别在于,JSON 字符串必须使用 双引号,单引号会导致语法错误。

与 JavaScript 的字面量相比,JSON 对象的键(属性名) 必须 加 双引号。

JSON 数组采用的就是 JavaScript 中的数组字面量形式

4.3. JSON的解析和序列化

JSON 对象的方法:

JSON.stringify():用于序列化 JavaScript 对象,将其转换为 JSON 字符串;
JSON.parse():用于解析 JSON 字符串,将其转换为 JavaScript 值。

知识点补充:解析 JSON 字符串的其它方法

方法一:使用 JavaScript 的eval()函数

var obj = eval("(" + json + ")");

因为eval()函数会将传入的字符串当作 JavaScript 代码执行,为了防止 JavaScript 对象的花括号{}被误解析为 JavaScript 函数的花括号,需要对 JSON 字符串加上圆括号。

方法二:巧妙使用 Function 构造函数

var obj = new Function("return (" + json + ")")();

总结

2023–12-17文章来源地址https://www.toymoban.com/news/detail-837191.html

到了这里,关于Ajax+JSON学习二的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ajax & axios & json

    目录 一、ajax 1. 概念 2. 实现方式    (1)原生的JS实现方式(了解)       (2) JQeury实现方式 二、axios  1. axios 介绍 2. axios特点 3. 官方文档 4. axios使用 (1) axios的基本使用(发送get/post请求) (2)axios基本使用-获取数据 (3)axios基本使用-传参 (4)axios基本使用-发布

    2024年02月15日
    浏览(39)
  • JSON和AJAX

    AJAX(Asynchronous JavaScript and XML)是一种无需重新加载整个页面就能更新部分网页的技术。它使用JavaScript的XMLHttpRequest对象来发送异步请求,并获取服务器响应。AJAX可以用于在不刷新页面的情况下更新网页内容、与服务器交换数据并更新部分网页,提高用户体验。 JSON(JavaScr

    2024年01月24日
    浏览(36)
  • AJAX和JSON

            AJAX(Asynchronous JavaScript and XML)是一种用于创建交互式、动态网页的技术。它允许网页在不重新加载整个页面的情况下与服务器进行异步通信,从而改善用户体验。以下是关于AJAX的一些重要信息: 异步通信 :AJAX 的核心特性是异步通信,意味着在向服务器发送请

    2024年02月07日
    浏览(39)
  • AJAX与JSON

    AJAX(Asynchronous JavaScript And XML):异步的 JavaScript 和 XML 本身不是一种新技术,而是多个技术综合。用于快速创建动态网页的技术 一般的网页如果需要更新内容,必需重新加载个页面。 而 Ajax 通过浏览器与服务器进行少量数据交换,就可以使网页实现异步更新。也就是在不重新

    2024年02月07日
    浏览(36)
  • Ajax 获取 JSON数据

    Ajax 全称“Asynchronous JavaScript and XML”,译为“异步 JavaScript 和 XML”,程序员们习惯称之为“阿贾克斯”,通过 Ajax 我们可以异步在服务器与客户端之间传递数据。在 Ajax 中,普遍使用 JSON 作为传输数据的格式。 一般情况下,我们可以通过 JavaScript 来发送 Ajax 请求,并接收响

    2023年04月12日
    浏览(41)
  • AJAX异步请求&JSON数据格式

    目录 前言 1.AJAX的实现方式 1.1原生的js实现方式 1.2JQuery实现方式 2.1语法 3.JSON数据和Java对象的相互转换 3.1将JSON转换为Java对象 3.2将Java对象转换为JSON AJAX:ASynchronous JavaScript And XML    异步的JavaScript 和 XML。 Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技

    2024年02月16日
    浏览(45)
  • 异步请求(Ajax,axios,json)

    同步/异步请求 表单(前端)向后端发送请求,属于同步请求 同步 : 发一个请求, 给一个回应, 会用回应的内容 覆盖 掉浏览器中内容,这样会打断前端其他的正常操作,在现在的前端中,显得不太友好。 异步 : 不同步 前端正常输入时,可以同时与后端进行交互,后端响应的数据

    2024年02月12日
    浏览(54)
  • AJAX与JSON数据交互处理

    Ajax即 A synchronous  J avascript  A nd  X ML(异步JavaScript和XML)在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括: 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3]  使用Ajax技术网页应用能够快速地将增量更新呈现在

    2024年02月09日
    浏览(49)
  • jackson库收发json格式数据和ajax发送json格式的数据

    一、jackson库收发json格式数据   jackson库是maven仓库中用来实现组织json数据功能的库。 json格式  json格式一个组织数据的字符文本格式,它用键值对的方式存贮数据,json数据都是有一对对键值对组成的,键只能是字符串,用双引号包括;值可以是字符串,数字,布尔表达式

    2024年02月13日
    浏览(49)
  • 第十一篇JavaScript JSON与AJAX

    在JavaScript中,JSON(JavaScript Object Notation)是一种常用的数据格式,用于存储和交换数据。它基于JavaScript的对象字面量语法,但具有更宽松的语法规则。 json 是一种轻量级的数据交换格式 。 JSON使用键值对的方式表示数据,其中键是一个字符串,值可以是字符串、数字、布尔

    2024年04月16日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包