文章目录

  • jquery对 ajax 的支持
  • 1.$obj.load()
  • 2.$.get() 和 $.post()
  • 3. $.ajax()
  • 跨域
  • 1，什么是跨域
  • 2，解决方案
  • 3, jquery 的跨域


jquery对 ajax 的支持

1.$obj.load()

作用：载入远程的HTML文件到指定的元素中

$obj.load(url,data,callback)
	$obj:显示响应内容的jq元素
	url:请求地址
	data:请求参数(可省略)
		方式1:字符串传参
		"key1=value1&key2=value2"
		注：此种传参会使用 get 方式发送请求
		方式2:使用JS对象传参
		{
   		 key1:"value1",
         key2:"value2"
		}
		注：此种传参会使用 post 方式发送请求
	   callback:响应成功后的回调函数(可省略)
eg.
<script>
    $(function () {
        $('#btn').click(function () {
            //load
            //$('#show').load('/index/test_load_server');

            //参数 -GET形式
            //$('#show').load('/index/test_load_server','name=li&age=18')

            //参数 -POST形式
            //$('#show').load('/index/test_load_server',{name:'haha',age:18,})

            //回调
            //$('#show').load('/index/test_load_server',function () {
            //    alert('---This is callback---')
            //})

            //指定元素load -- 将元素写在url中
            $('#show').load('/index/test_load_server #btn2')
        })
    })

</script>
2.$.get() 和 $.post()

作用：通过get方式异步的向远程地址发送请求

$.get(url,data,callback,type)
		url:请求地址
		data:传递到服务器端的参数
		可以是字符串 ："name=sf.zh&age=18"
		也可以是js对象:
			{
				name:"sf.zh",
				age:18
			}
		callback:响应成功后的回调函数
        ex: function(data){
           console.log(data)
        }
		type:响应回来的数据的格式
			取值如下:
			1.html : 响应回来 的文本是html文本
			2.text : 响应回来的文本是text文本
			3.script : 响应回来的文本是js执行脚本
			4.json : 响应回来的文本是json格式的文本
$.post  -->  请求头中的Content-Type:application/x-www-form-urlencoded;charset=utf-8
即为表单post提交.后台Django可以通过request.POST获取数据

考虑 csrf_token --> 请求参数里拼上 csrfmiddlewaretoken

{% csrf_token %}
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
3. $.ajax()
参数对象中的属性：
	1.url : 字符串，表示异步请求的地址
	2.type : 字符串，请求方式，get 或 post
	3.data : 传递到服务器端的参数
		可以是字符串 ："name=sf.zh&age=18"
		也可以是js对象:
			{
				name:"sf.zh",
				age:18
			}
	4.dataType : 字符串，响应回来的数据的格式
		1.'html'
		2.'xml'
		3.'text' 
		4.'script'
		5.'json'
		6.'jsonp' : 有关跨域的响应格式
	5.success:回调函数，请求和响应成功时回来执行的操作
	6.error : 回调函数，请求或响应失败时回来执行的操作
	7.beforeSend : 回调函数，发送ajax请求之前执行的操作，如果return false，则终止请求
		使用场景:
			1.发送请求之前可将提交按钮置成不可点击状态,防止用户重复提交
			2.按钮点击之后,loading画面
			3.所有数据相关的检验
	8.async: 是否启用异步,默认为 true
<script>
    $(function () {
        $('#btn').click(function () {
            $.ajax({
                //向 url 发送请求
                url:'/index/test_jq_ajax_server',

                //type - 此次请求的方式
                type:'get',

                // dataType-服务器返回的类型
                dataType:'json',

                // 是否异步
                async:true,

                //响应成功的回调函数
                success:function (data) {
                    console.log(data.name)
                    // 发送成功之后 将btn置为可用
                    $('#btn').removeAttr('disabled')
                    // 隐藏加载动画
                    $('#loading').hide(3000);
                },

                //响应失败的回调函数
                error:function () {
                    alert('Server is busy!')
                },

                beforeSend:function () {
                    // 将btn 置成不可用状态,避免重复提交
                    $('#btn').attr({disabled:'disables'})
                    // 加载loading 动画
                    $('#loading').show();
                },
            })
        })
    })
</script>

跨域

1，什么是跨域

跨域：非同源的网页，相互发送请求的过程，就是跨域

浏览器的同源策略：
同源：多个地址中，相同协议，相同域名，相同端口被视为是"同源"
在HTTP中，必须是同源地址才能互相发送请求，非同源拒绝请求(<script>和<img>除外)。

http://www.tedu.cn/a.html
http://www.tedu.cn/b.html
以上地址是 "同源"

http://www.tedu.cn/a.html
https://www.tedu.cn/b.html
由于 协议不同 ，所以不是"同源"

http://localhost/a.html
http://127.0.0.1/a.html
由于 域名不同 ，所以不是"同源"

http://www.tedu.cn:80/a.html
http://www.tedu.cn:8080/b.html
由于端口不同 ， 所以不是"同源"
2，解决方案

通过 script标签 src 向服务器资源发送请求
由服务器资源指定前端页面的哪个方法来执行响应的数据

'''''''''''''''''''''js 原生跨域''''''''''''''''''''''''''''

------views.py---------
def cross(request):

    return render(request,'index/cross.html')

def cross_server(request):

    func=request.GET.get('callback')

    return HttpResponse(func+"('跨域成功')")

--------html-------------
<script>
    // 预留函数
    function print(data) {
        console.log(data)
    }

    // js 原生跨域
    $(function () {
        $('#btn').click(function () {

            // 获取body
            var body=document.getElementsByTagName('body')[0];
            // 创建script
            var script=document.createElement('script');
            script.type='text/javascript';
            script.src='http://localhost:8000/index/cross_server?callback=print';
            // 将script 添加到body里
            body.append(script);
        })
    })
</script>
3, jquery 的跨域

jsonp - json with padding

  • 只支持 get 请求
  • 用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据

ex:
当前地址： http://127.0.0.1:8000/index
欲访问地址： http://localhost:8000/data?callback=xxx

$.ajax({
	url:'xxx',
	type:'get',
	dataType:'jsonp',//指定为跨域访问
	jsonp:'callback',//定义了callback的参数名，以便获取callback传递过去的函数名 
	jsonpCallback:'xxx' //定义jsonp的回调函数名
});


//超简版本
$.ajax({
	url:'xxx',
	type:'get',
	dataType:'jsonp',//指定为跨域访问
	success: function(data){
        console.log(data);       
    }
});
def cross_server(request):
    func=request.GET.get('callback')
    d={
        'name':'xiao',
        'age':18,
    }
    import json
    return HttpResponse(func+'('+ json.dumps(d)+')')

// jquery 跨域
$(function () {

    $('#btn').click(function () {
        //ajax版本
        $.ajax({

            url:'http://localhost:5000/index/cross_server',
            type:'get',
            dataType:'jsonp',
            jsonp:'callback',
            jsonpCallback:'print',
        })
        //ajax 超简版
        $.ajax({
            url:'http://localhost:5000/index/cross_server',
            type:'get',
            dataType:'jsonp',
            success:function (data) {
                console.log('----ajax-console---')
                console.log(data)
            }
        })
    })

})