jQuery json
concept
Nowadays, software is not limited to one machine. Many servers, such as networked games and e-commerce websites, are clusters of servers, ranging from dozens to tens of thousands. Then these computers have to do one thing if they are to be connected to do big things. What's the matter? Transfer data between each other.
We all know that computers are connected through a network, and the most mainstream in the network is transmission through the TCP/IP protocol. What about the software? How to transfer data between our software? If you have a production system, go to the human resource system to obtain personnel information. How does this transfer data? Java objects cannot be transferred directly.
In the early days, we used txt and even special messages, but only the data did not indicate that it was not easy to recognize. The industry introduced xml, which has format, description, and data, but there are too many irrelevant content, even tags The amount far exceeds the data, and the industry introduced JSON. Lightweight, just a few brackets, [], {},:, "" to get the format. This is amazing. It defeats the XML that has occupied the market for decades and joins the world.
So what is JSON?
JSON (JavaScript Object Notation, JS Object Notation) is
not well-named and very awkward, we just remember that it is a lightweight data exchange format.
It is based on a subset of ECMAScript (js specification) and uses a text format completely independent of programming language to store and represent data.
The concise and clear hierarchical structure makes JSON an ideal data exchange language. It is the terminator of xml and has become the mainstream development method (ajax asynchronous request, json return).
json string:
[ //数组
{ //一条记录
"p":"3999.00", //键值对: k,v
"op":"2499.00",
"cbf":"0",
"id":"J_100007043753",
"m":"10000.00"
}
]
Structural features:
Map structure: k,v
"p": "3999.00", price
"id": "J_100007043753", number
- Array[]
- One record {}, multiple records separated by commas {}, {}, the last one has no comma
- Key-value pair "p": "2499.00", kv is enclosed in double quotation marks, multiples are separated by commas
Conversion
JSON is already supported as a built-in browser, so we can directly use the JSON object:
json to obj JSON.parse("json")
obj to json JSON.stringify(obj)
Get the price of JD products
1) Realize early binding and late binding events
Common online payments
a. Disappear the payment button
b. Disable the payment button, add a reminder: You have already paid, please wait
JD.com provides multiple methods for obtaining results: playing crawlers
Jingdong gets the price of a certain product 100007043753
Request link:
https://item.jd.com/100007043753.html Product details
https://item.jd.com/100007043747.html#none Product price
Test to get the price of Jingdong goods
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
//京东商品价格地址：https://p.3.cn/prices/mgets?skuIds=J_100009077449
//js可以单引号括起来双引号，或者双引号中单引号括起来
var jsonstr = '[{"p":"5999.00","op":"5999.00","cbf":"0","id":"J_100009077449","m":"6499.00"}]';
console.log( jsonstr );
//js提供JSON工具，对json字符串进行转换，js对象
var jsonobj = JSON.parse( jsonstr );
console.log( jsonobj );
</script>
</body>
</html>
Webpage effect:
Parse the json string used by Jingdong to obtain the commodity price
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.min.js"></script>
</head>
<body>
<h1>解析京东获取商品价格的json字符串</h1>
<div>
商品的编号：<br />
<span id="id"></span>
</div>
<div>
商品的价格：<br />
<span id="price"></span>
</div>
</body>
<script>
//获取json字符串，再次改造ajax去京东网站获取到这个内容
var jsonstr = '[{"p":"5999.00","op":"5999.00","cbf":"0","id":"J_100009077449","m":"6499.00"}]';
//先把json字符串转换js对象
var jsonobj = JSON.parse( jsonstr );
//获取到数组，拿数组的第一条记录
var rs = jsonobj[0];
var price = rs.p; //javascript对象语法，rs对象获取p属性值
console.log(price);
var id = rs.id.substring(2); //通过js截串函数substring，从第3个字符截取到最后
console.log(id);
$("#id").text(id);
$("#id").css("color", "blue"); //设置样式 color:blue;
$("#price").text(price);
$("#price").css("color", "red"); //设置样式：color:red;
</script>
</html>
Webpage effect:
h5+css3 = json = ajax = Jingdong website
Using ajax technology, you can initiate a request,
connect to the Jingdong backend (java springmvc) database for processing, query the price information of the product in the database,
return the response response, and convert the json string.
jQuery Ajax
ajax stands for "Asynchronous Javascript And XML" (asynchronous JavaScript and XML), which refers to a technology for creating interactive, fast and dynamic web applications.
In the early days, there was only a synchronous way, and multiple requests could only be executed sequentially and could only be executed.
With ajax asynchronous technology, you can directly initiate a request without waiting for the completion of the previous request.
After the server returns, ajax notifies the client program through callback technology, and passes the response result to the callback function written by the user in advance. By exchanging a small amount of data with the server in the background, Ajax can make web pages update asynchronously.
This means that part of the web page can be updated without reloading the entire web page to improve the efficiency of the web page. Users do not need to wait for the page to refresh, and the content changes with a swish. Change the original refresh of the entire page, causing the page to be dazzling. So as soon as this technology appeared, it was praised by the industry.
Keywords: asynchronous, callback, partial refresh.
Detailed parameter
Eight parameters:
$.ajax({ //$.get，$.post，$.getJSON
async: //请求同步异步，默认true异步
type: //请求类型：GET/POST
url: //请求的网站地址 https://p.3.cn/prices/mgets
data: //提交的数据，参数 ? skulds = j_100009077449
contentType: //请求的MIME媒体类型：application/x-www-form-urlencoded（默认）、application/json;charset=UTF-8 不会中文乱码了
dataType: //服务器返回MIME类型：xml/html/script/json/jsonp
success: function(data){ //请求成功回调函数，data封装网站返回的数据
console.log( data );
},
error: function(e){ //请求失败回调函数，e封装错误信息
console.log(e.status); //状态码
console.log(e.responseText); //错误信息
}
})
You must visit the external website, visit JD. This case cannot be done without the Internet
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.min.js"></script>
</head>
<body>
<h1>解析京东获取商品价格的json字符串</h1>
<div>
商品的编号：<br />
<span id="id"></span>
</div>
<div>
商品的价格：<br />
<span id="price"></span>
</div>
</body>
<script>
//发起ajax请求,{}参数的集合
$.ajax({
//请求同步异步，默认true异步
async: true,
//请求类型：GET/POST
type: "POST",
//请求的网站地址 https://p.3.cn/prices/mgets
url: "https://p.3.cn/prices/mgets", //请求地址
//提交的数据，参数 ? skulds = j_100009077449
data: {
//请求参数
//? skulds = j_100009077449
"skuIds": "J_100009077449" //参数格式k:v
},
//请求的MIME媒体类型 不会中文乱码了
contentType: "application/json;charset=utf-8;",
//服务器返回MIME类型：xml/html/script/json/jsonp
dataType: "jsonp", //返回类型
//请求成功回调函数，data封装网站返回的数据
success: function( data ){
console.log(data)
//解析返回值，把编号和结果在页面中展现出来
var price = data[0].p;
var id = data[0].id.substring(2);
$("#id").text(id);
$("#id").css("color", "blue"); //设置样式 color:blue;
$("#price").text(price);
$("#price").css("color", "red"); //设置样式：color:red;
},
//请求失败回调函数，e代表错误状态号和异常信息
error: function( e ){
console.log(e.status); //状态码
console.log(e.responseText); //错误信息
}
})
</script>
</html>
If the code does not execute, it means that it is an environmental problem
If my code is not executed properly, indicating that environmental problems
if my code is executed properly, the code wrong
section by section to debug
Access-Control-Allow-Origin cannot use cross-domain request to
localhost, another ip address (URL) by default allows
jsonp to support cross-domain requests
summary:
1) javascript upgrade jQuery, js library, can not be called a framework
2) Reform
access form, lengthy code, $()=document object
js function is very simple, jQuery cattle. Attr(), .css more concise operation method
jQuery dominates the industry for 10 years, Vue appeared, the real framework
jQuery began to decline, not Completely disappeared, and the market share becomes smaller. If you
understand this technology, you can use it,
3) The difference between js and jQuery writing: selector
a. 标签
document.getElementsByTagName $("h1")
b. class修饰
document.getElementsByClassName $(".title")
c. name修饰
document.getElementsByName $("[input:name='username']")
d. id修饰
document.getElementById $("#price") 推荐方式
js
document.getElementById(“username”).value = “abc”;
Dynamically set the style sheet, the code is very cumbersome, not as good as your own sytle xxx
jQuery
$("#username").val("abc");
$("#username").css("color","red");
$("#username").css("font-size", 24);
js is accustomed to using the early binding method, jQuery is used to using the late binding method The
early binding is very beautiful, on the label οnclick="method()",
$("btnOK").click(function(){
})
Java and javascript are in the method body, this directly uses
jQuery. Its writing: $(this)
json is a subset of javascript, it is very powerful, it expresses our data very concisely
<resultset><id>123456</id><price>3000</price></resultset>表达方式XML
{"id": "123456", "price":3000 } JSON
JSON becomes the medium for data transmission over the network
Parse the JSON returned from the background on the page:
JSON object, directly integrated by the browser, comes with
JSON.parse (json string) to convert json format strings into js objects, obj.p can directly access the elements inside
JSON.stringify( js object) Convert js object to json string and transfer data
Link to the external network, visit JD website
ajax submission, json return
The ajax writing of js is very cumbersome,
the ajax writing of jQuery
var obj = new Object();
var obj = {}
$.ajax(obj) ajax方法，{}代表js对象
({
async 同步，异步true，默认
type GET/POST，习惯POST
url 请求网站地址
data 链接的参数
contentType 固定值：application/json;charset=utf8;
dataType 返回值类型：json/jsonp
success: function( data ){ data网站返回内容封装到这个对象
}
error: function( e ){
e.status 状态号 404,505
e.responseText 错误信息
}
})
jQuery, JSON, Ajax front-end and back-end implementation throughout
Past content:
Front-end technology jQuery+Json+Ajax+NodeJS
Transmission link https://blog.csdn.net/QQ1043051018/article/details/112348056
Three Musketeers on the web, html/css/javascript
Send link https://editor.csdn.net/md/?articleId=112363795
JavaScript basic ES6 advanced syntax
Transmission link https://blog.csdn.net/QQ1043051018/article/details/112309559