<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.btn{
display: inline-block;
padding: 5px 10px;
background-color: coral;
color: white;
}
</style>
<body>
<h1>Ajax全套</h1>
<h3>1.Ajax发送GET请求</h3>
<div>
<a class="btn" onclick="AjaxSubmit1();">点我</a>
<a class="btn" onclick="AjaxSubmit2();">点我</a> <a class="btn" onclick="AjaxSubmit3();"> point I </a><div></ div>
Does not depend on the jeqery {# #} Submit
<a class="btn" onclick="AjaxSubmit4();"> point I </a>
{# does not depend on the jeqery #} Submit
</ div>
<H3> 2.Ajax sending a POST </ H3>
<div >
<a class="btn" onclick="AjaxSubmit5();"> point I </a>
</ div>
<h3> 3. Putian </ h3>
<div>
{# <H6> learning iframe </ h6 >} #
{# <div> #}
{# <iNPUT ID = "URL" placeholder = "Please enter the URL"> <a onclick="Test1();">} # Check </a>
{# </ div >} #
{# <iframes ID = "iframes" the src = "http://www.autohome.com.cn" style = "height: 800px; width: 600px"> </ iframes> #}
<H6> based iframes + form Submit form </ h6>
<iframe id = "iframe" name = "ifra"> </ iframe> {# onload allowed to execute showing loading} #
{# return callback function is not used, but rather written directly to the frame inside an iframe #}
<id = "fm" form action = "/ ajax1.html /" method = "post" target = "ifra"> {# target = "ifra" and the target-bound iframe, the name must be a value} #
{# page the return value will be placed in an iframe} #
<INPUT name = "the root" value = "111111">
<a onclick="AjaxSubmit5();"> Submit </a>
</ form>
</ div>
<H3> 4. file Upload </ H3>
<INPUT type = "file" ID = "IMG">
<a class="btn" onclick="AjaxSubmit6();"> upload </a>
<A class = "BTN" the onclick = "AjaxSubmit7 ();"> Upload </a>
<iframes style = "the display: none" ID = "iframe1" name = "ifra1"> </ iframes>{# Represents the onload allowed to perform loading} #
{# return callback function is not used, but rather written directly to the frame inside an iframe} #
<form ID = "FM1" Action = "/ ajax1.html /" Method = "post" enctype = "multipart / form-data" target = "ifra1"> {# target = "ifra" and the target-bound iframe, the name must be a value} #
{# page return value in an iframe # }
<input type="text" name="k1">
<input type="text" name="k2">
<input type="file" name="k3">
<a onclick="AjaxSubmit8();">提交</a>
</form>
<script src="/static/js/jquery-3.1.1.js"></script>
<script>
{# function funcName(arg) {#}
{# //this=window#}
{# //arg=当前标签#}
{# }#}
{# function funcName() {#}
{# //this 当前标签#}
{# }#}
{# document.getElementsById('iframe').onclick=funcName;#}
function Test1() {
var url=$('#url').val();
$('#iframe').attr('src',url);
}
function AjaxSubmit1() {
$.ajax({
URL: '/ ajax1.html',
type: 'the GET',
Data: { 'P': 123},
Success: function (Arg) {
}
})
}
function AjaxSubmit2 () {
{# create new objects must be added when keyword, jequery is based on a way xml} #
var = new new XHR the XMLHttpRequest ();
xhr.onreadystatechange = function () {
iF (xhr.readyState ==. 4) {
// received-data returned by the server, when each times will change after executing a time when
console.log (xhr.responseText);
}
};
will be executed when {# onreadystatechange state changes, return here to pay attention to all the things to do finish. Before the callback function to send the configuration, do not know who to turn back when otherwise hair #}
xhr.open ( 'GET', '/ = ajax1.html the p-123?');
{# Create a connection with whom, in what way #}
xhr.send (null);
{# GET submitted the form do not have to put anything} #
}
function AjaxSubmit3 () {
$ .ajax ({
url: '/ ajax1.html',
of the type: 'POST',
the Data: { 'the p- ': 123},
Success: function (Arg) {
}
})
}
function AjaxSubmit4 () {
{# create an object must be added when the new keyword, jequery is based on a way xml} #
var = new XHR the XMLHttpRequest () ;
xhr.onreadystatechange = function () {
IF (xhr.readyState ==. 4) {
// received-data returned by the server, the callback function
the console.log (xhr.responseText);
}
};
xhr.open ( 'the POST', '/ ajax1.html /');
xhr.setRequestHeader ( 'the Content-the Type', 'file application / X-WWW-form-urlencoded; charset-UTF-. 8');
{# <transmitted remember to bring a request header post requests </ remember to bring the post request transmission> must take this, the requests from the body to the inside post} #
xhr.send ( "P = 456");
{# time content on in request.body} #
}
function AjaxSubmit5 () {
. document.getElementById ( 'iframe') the onload = reloadIframe;
document.getElementById ( 'FM') Submit ();.
}
function reloadIframe () {{# acquire content and iframe } print #
the console.log (the this);
{# the console.log (ths.contentWindow)} #
{# the console.log (ths.contentWindow.document.body.innerHTML)} #
{# box into the iframe, wherein the printing content#}
The console.log # {(.. $ (THS) .contents () Find ( 'body') HTML ())} #
{#} juqery way to find #
var Content = this.contentWindow.document.body.innerHTML;
var obj = JSON.parse (content); {# string into an object} #
IF (obj.status) {
Alert (obj.message);
}
}
. {Number the #a is the readyState} #
{# state value (integer) # }
{# #}
{# details: #}
{# 0 is not initialized, open () method has not been called;} #
{# 1 to start a call to open () method, Send () method is not called;} #
{ # 2- transmission, has been called the send () method, no response is received;} #
{# 3 - receiving section has received the response data;} #
{# 4- completed, all the response data has been received;} #
AjaxSubmit6 function () {
var the FormData new new Data = ();
data.append ( 'K1', 'V1');
data.append ( 'K2', 'V2');
data.append ( 'K3', document.getElementById ( 'IMG') Files [0].);
$ .ajax ({
URL: '/ ajax1.html /' ,
type: 'the POST',
Data: Data,
Success: function (Arg) {
the console.log (Arg);
},
// If this formdata two parameters need to be added, the content is directly transmitted, do not require specialized treatment
the processData: to false, // Tell the jQuery Not to Process Data The
contentType: Not to the jQuery to false // Tell SET contentType
})
}
function AjaxSubmit7 () {
. # {document.getElementById ( 'IMG') Files [0]; // plus an index of 0 means the file is to obtain the contents of #}
{# create objects when you must add new keywords,jequery is based on a way of xml} #
the FormData new new Data = var ();
// FormData may also upload files, the dictionary which is not
data.append ( 'K1', 'V1');
data.append ( 'K2', 'V2');
data.append ( ' K3 ', document.getElementById (' IMG ') Files [0]);.
var = new new XHR the XMLHttpRequest ();
xhr.onreadystatechange = function () {
IF (xhr.readyState ==. 4) {
// returned by the server have been received data, each time after executing a time when the change will
console.log (xhr.responseText);
}
};
will be executed when {# onreadystatechange state changes, return here to pay attention to all the things to do finish. Before the callback function to send configuration, do not know who to turn back when otherwise made #}
xhr.open ( 'the POST', '/ ajax1.html /');
{# create a connection with whom, in what manner #}
xhr.send (Data);
AjaxSubmit8 function () {
document.getElementById ( 'iframe1') the onload = reloadIframe1;.
document.getElementById ( 'FM1') Submit ();.
}
function reloadIframe1 () {{# acquire and print content iframe} #
the console.log ( the this);
{# the console.log (ths.contentWindow)} #
{# the console.log (ths.contentWindow.document.body.innerHTML)} #
{# box into the iframe, wherein the content of the print} #
{# Console. log (.. $ (THS) .contents () Find ( 'body') HTML ())} #
{#} juqery way to find #
var Content = this.contentWindow.document.body.innerHTML;
var obj = the JSON.parse (content); {# string into an object} #
the console.log (obj);
}
</ Script>
</ body>
</ HTML>
Ajax request and transmit different iframe
Guess you like
Origin www.cnblogs.com/wenghao/p/11497251.html
Recommended
Ranking