码迷,mamicode.com
首页 > Web开发 > 详细

发送不同ajax请求以及iframe

时间:2019-09-10 14:43:22      阅读:94      评论:0      收藏:0      [点我收藏+]

标签:部分   width   action   reload   不同   lin   ade   状态   file   

<!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>
{# 不依赖jeqery的submit#}
</div>

<div>
<a class="btn" onclick="AjaxSubmit3();">点我</a>
<a class="btn" onclick="AjaxSubmit4();">点我</a>
{# 不依赖jeqery的submit#}
</div>

<h3>2.Ajax发送POST请求</h3>
<div>
<a class="btn" onclick="AjaxSubmit5();">点我</a>
</div>

<h3>3.莆田</h3>
<div>
{# <h6>学习iframe</h6>#}
{# <div>#}
{# <input id="url" placeholder="请输入URL"> <a onclick="Test1();">查看</a>#}
{# </div>#}
{# <iframe id="iframe" src="http://www.autohome.com.cn" style="height: 800px;width: 600px"></iframe>#}
<h6>基于iframe+Form表单提交</h6>
<iframe id="iframe" name="ifra"></iframe>{# onload表示加载时让其执行#}
{# 返回的回调函数没有使用,而是直接写到iframe的框里面了#}
<form id="fm" action="/ajax1.html/" method="post" target="ifra">{#target="ifra"和目标绑定iframe,必须是name的值#}
{#页面返回的值会放在iframe中#}
<input name="root" value="111111">
<a onclick="AjaxSubmit5();">提交</a>
</form>
</div>

<h3>4.文件上传</h3>
<input type="file" id="img">
<a class="btn" onclick="AjaxSubmit6();">上传</a>
<a class="btn" onclick="AjaxSubmit7();">上传</a>

<iframe style="display: none" id="iframe1" name="ifra1"></iframe>{# onload表示加载时让其执行#}
{# 返回的回调函数没有使用,而是直接写到iframe的框里面了#}
<form id="fm1" action="/ajax1.html/" method="post" enctype="multipart/form-data" target="ifra1">{#target="ifra"和目标绑定iframe,必须是name的值#}
{#页面返回的值会放在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:‘GET‘,
data:{‘p‘:123},
success:function (arg) {

}
})
}
function AjaxSubmit2() {
{# 创建对象的时候必须加new关键字,jequery是基于xml的一种方式#}
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function () {
if(xhr.readyState==4){
//接收完毕服务器返回的数据,当每次执行完时值都会改变
console.log(xhr.responseText);
}
};

{# onreadystatechange状态发生更改时会执行,这里要关注全部返回完毕要做的事情。回调函数要在send前配置,不然发时不知道回来找谁#}
xhr.open(‘GET‘,‘/ajax1.html?p=123‘);
{# 与谁创建连接,以什么方式#}
xhr.send(null);
{# get形式提交就什么都不用放#}
}

function AjaxSubmit3() {
$.ajax({
url:‘/ajax1.html‘,
type:‘POST‘,
data:{‘p‘:123},
success:function (arg) {

}
})
}
function AjaxSubmit4() {
{# 创建对象的时候必须加new关键字,jequery是基于xml的一种方式#}
var xhr=new XMLHttpRequest();

xhr.onreadystatechange=function () {
if(xhr.readyState==4){
//接收完毕服务器返回的数据,回调函数
console.log(xhr.responseText);
}
};
xhr.open(‘POST‘,‘/ajax1.html/‘);
xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded; charset-UTF-8‘);
{# <发送post请求记得携带请求头</发送post请求记得携带>必须把这个带上,把请求从body中转换到post里面#}
xhr.send("p=456");
{# 这时的内容放在request.body中#}
}

function AjaxSubmit5() {
document.getElementById(‘iframe‘).onload=reloadIframe;
document.getElementById(‘fm‘).submit();
}
function reloadIframe() {{# 获取iframe内容并打印#}
console.log(this);
{# console.log(ths.contentWindow)#}
{# console.log(ths.contentWindow.document.body.innerHTML)#}
{# 进入iframe的框中,打印其中内容#}
{# console.log($(ths).contents().find(‘body‘).html())#}
{# juqery方式查找#}
var content=this.contentWindow.document.body.innerHTML;
var obj=JSON.parse(content);{# 把字符串转换为对象#}
if(obj.status){
alert(obj.message);
}
}
{#a. Number readyState#}
{# 状态值(整数)#}
{# #}
{# 详细:#}
{# 0-未初始化,尚未调用open()方法;#}
{# 1-启动,调用了open()方法,未调用send()方法;#}
{# 2-发送,已经调用了send()方法,未接收到响应;#}
{# 3-接收,已经接收到部分响应数据;#}
{# 4-完成,已经接收到全部响应数据;#}

function AjaxSubmit6() {
var data=new FormData();
data.append(‘k1‘,‘v1‘);
data.append(‘k2‘,‘v2‘);
data.append(‘k3‘,document.getElementById(‘img‘).files[0]);
$.ajax({
url:‘/ajax1.html/‘,
type:‘POST‘,
data:data,
success:function (arg) {
console.log(arg);
},
//如果用formdata这种需要添加俩个参数,直接发送内容,不需要做特殊化处理
processData: false, // tell jQuery not to process the data
contentType: false // tell jQuery not to set contentType
})
}

function AjaxSubmit7() {
{# document.getElementById(‘img‘).files[0];//加索引0表示是获取文件的内容#}
{# 创建对象的时候必须加new关键字,jequery是基于xml的一种方式#}
var data=new FormData();
//formdata还可以上传文件,字典这不能
data.append(‘k1‘,‘v1‘);
data.append(‘k2‘,‘v2‘);
data.append(‘k3‘,document.getElementById(‘img‘).files[0]);
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function () {
if(xhr.readyState==4){
//接收完毕服务器返回的数据,当每次执行完时值都会改变
console.log(xhr.responseText);
}
};
{# onreadystatechange状态发生更改时会执行,这里要关注全部返回完毕要做的事情。回调函数要在send前配置,不然发时不知道回来找谁#}
xhr.open(‘POST‘,‘/ajax1.html/‘);
{# 与谁创建连接,以什么方式#}
xhr.send(data);
{# get形式提交就什么都不用放#}
}
function AjaxSubmit8() {
document.getElementById(‘iframe1‘).onload=reloadIframe1;
document.getElementById(‘fm1‘).submit();
}

function reloadIframe1() {{# 获取iframe内容并打印#}
console.log(this);
{# console.log(ths.contentWindow)#}
{# console.log(ths.contentWindow.document.body.innerHTML)#}
{# 进入iframe的框中,打印其中内容#}
{# console.log($(ths).contents().find(‘body‘).html())#}
{# juqery方式查找#}
var content=this.contentWindow.document.body.innerHTML;
var obj=JSON.parse(content);{# 把字符串转换为对象#}
console.log(obj);
}
</script>
</body>
</html>

发送不同ajax请求以及iframe

标签:部分   width   action   reload   不同   lin   ade   状态   file   

原文地址:https://www.cnblogs.com/wenghao/p/11497251.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!