Let's talk about JavaScript Ajax and transfer the data to JSON
############################################ #JavaScript Ajax json###########################################
Note: The Json2.js library needs to be introduced because of the JSON json.stringify () method.
HTML code:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Document</title>
<style type= "text/css" media= "screen" >
div {
width:300px;
margin:0 Auto;
Text-align:center;
border:1px solid #ED7AE0;
border-radius:4px;
padding:15px;
}
Input {
margin:0 Auto;
Display:block;
margin-top:15px;
width:150px;
border-radius:5px;
height:24px;
border:1px solid #40F3E6;
}
</style>
<script src= "Json2.js" ></script>
<script src= "Index.js" defer= "defer" ></script>
<body>
<div>
<input type= "text" required= "true" Name= "" id= "un"
placeholder= "UserName"/>
<input type= "text" required= "true" Name= "" id= "PW" placeholder= "Password"/>
<input type= "Submit" Name= "value=" Submit "id=" SB "/>
</div>
</body>
Index.js
Window.onload = function () {
(document.getElementById ("SB")). onclick = function () {
var url = ""//fill in the background file path
var data = {
UserName:document.getElementById ("un"). Value,
Password:document.getElementById ("PW"). Value
}
var jsondata = json.stringify (data); Convert the data object to a JSON string
Ajax (URL, jsondata);
}
}
function ajax (URL, data) {
var oajax = null;
try{
Oajax = new XMLHttpRequest ();
}catch (xhrerror) {
Alert ("Your brower isn ' t supporting xmlhttprequest!");
}
try{
Oajax = new ActiveXObject ("Microsoft.XMLHTTP");
}catch (activeerror_microsoft_xmlhttp) {
Alert ("Your brower isn ' t supporting activexobject!");
}
Oajax.open ("POST", url, True);
Oajax.send (data);
Oajax.onreadystatechange = function () {
if (oajax.readystate = = 4) {
if (Oajax.status = = 200) {
Background return Data manipulation view Layer
}
}
}
}
######################################### #jQuery Ajax json################################################
Introduction of jquery libraries and json2.js
HTML code:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Document</title>
<style type= "text/css" media= "screen" >
div {
width:300px;
margin:0 Auto;
Text-align:center;
border:1px solid #ED7AE0;
border-radius:4px;
padding:15px;
}
Input {
margin:0 Auto;
Display:block;
margin-top:15px;
width:150px;
border-radius:5px;
height:24px;
border:1px solid #40F3E6;
}
</style>
<script src= "Json2.js" ></script>
<script src= "Index.js" defer= "defer" ></script>
<body>
<div>
<input type= "text" required= "true" Name= "" id= "un"
placeholder= "UserName"/>
<input type= "text" required= "true" Name= "" id= "PW" placeholder= "Password"/>
<input type= "Submit" Name= "value=" Submit "id=" SB "/>
</div>
</body>
Test.js Code:
$ (document). Ready (function () {
$ ("#sb"). Click (function () {
var route = ""; Data transfer to File
var $content = {
UserName: $ ("#un"). Val (),
Password: $ ("#pw"). Val ()
}
var content = json.stringify ($content);
alert (content);
$.ajax ({
Type: "POST",
Url:route,
Data:content,
DataType: ' JSON ',
Success:function (data) {
}
});
});
});
JavaScript Ajax and the Ajax case study of jquery
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
