正文
ajax扩展、jsonp、
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
.hi{
background: #3a7fc5;
border-radius: 8px;
color: black;
font-size: 18px;
line-height: 26px;
margin-bottom: 20px;
width: 100%;
text-align: center;}
偷偷上传消息，首先想到ajax
而ajax是jquery是我们封装的功能。
方式一：ajax发消息
$.ajax({
url: '/ajax3.html',
type: 'GET', //或者是POST
data: {nid:2},
datetype:JSON, //声明后，arg会自动处理传入success,字符串--->对象
success:function (arg) {
// $('#content').html(arg);
}
})
方式二：原生XMLHttpRequests
ajax在内部是对XMLHttpRequests进行了封装，
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){ //有0-4种状态
// 接收完毕服务器返回的数据
console.log(xhr.responseText);
}
};
xhr.open('GET','/ajax1.html?p=123');
xhr.send(null);
xhr.open('POST','/ajax1.html');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
xhr.send(null)
// :----->当以POST方式提交时
原生语句需要一对特殊的请求头Content-Type，而这是由django决定的
如果不添加这对请求头django是不会对消息进行处理的,只会发到；
可以在request.body查到，但在get/post里查不到。
方式三：伪ajax 兼容性很好，很多上传文件都用
是指利用iframe+form实现偷偷发消息，即form的数据通过iframe提供的通道传输数据，不会使页面刷新。
iframe历史悠久，可以嵌套别人家的网站的东西
form传送数据会使页面刷新，
<iframe id="iframe" name="ifra"></iframe>
<form id="fm" action="/ajax1.html" method="POST" target="ifra">
<input name="root" value="111111" />
<a onclick="AjaxSubmit5()">提交</a>
</form>
function AjaxSubmit5() {
// 标签加载的时候自动执行
document.getElementById('iframe').onload = reloadIframe;
document.getElementById('fm').submit();
}
function reloadIframe() {
//this在这里默认指的是iframe标签
var content = this.contentWindow.document.body.innerHTML;
var obj = JSON.parse(content);
if(obj.status){
alert(obj.message);
}
}
----------------------------文件上传-----------------------------
在jquery里封装了一个FormData类;
方式一：ajax // jquery提供的
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)
},
processData: false, // tell jQuery not to process the data
contentType: false // tell jQuery not to set contentType
})
// 从ajax传递消息可知对data添加了请求头,
// 而现在以FORMdate这种方式处理数据来说，我们就不用ajax在对数据进行处理，直接发送就可以了
// 因此要加上这两句话。
方式二：原生语句XMLHttpRequests
var data = new 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);
}
};
xhr.open('POST','/ajax1.html');
xhr.send(data);
方式三：伪ajax
<iframe style="display: none" id="iframe1" name="ifra1"></iframe>
<form id="fm1" action="/ajax1.html" method="POST" enctype="multipart/form-data" target="ifra1">
<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 AjaxSubmit8() {
document.getElementById('iframe1').onload = reloadIframe1;
document.getElementById('fm1').submit();
}
function reloadIframe1() {
var content = this.contentWindow.document.body.innerHTML;
var obj = JSON.parse(content);
console.log(obj);
}
</script>
$.ajax({
type: "POST",
url: "/Mall/ajax_cart.html",
data: $(form).serializeArray(),
dataType: 'json',
success: function(msg){
$("#allmoney").html("¥"+msg);
}
});
