jquery对 ajax 的支持

最新推荐文章于 2024-07-25 06:11:43 发布

ambition_star

最新推荐文章于 2024-07-25 06:11:43 发布

阅读量157

点赞数

文章标签： ajax javascript

本文链接：https://blog.csdn.net/ambition_star/article/details/103914661

版权

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:响应成功后的回调函数(可省略)

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

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【异步】

跨域

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 向服务器资源发送请求
由服务器资源指定前端页面的哪个方法来执行响应的数据

我的网站：

function test(data){

	气象局给我的data

}

<script src='http://www.qixiangju.com/cross'>

气象局返回： test('25C')

3, jquery 的跨域

jsonp - json with padding
用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据

只支持get请求

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);       
    }
});
代码练习：
1.$.obj.load(目标网址）

```javascript
第一个html页面，获取第二个html页面的元素
<body>
    <h1>This  is  load_test   page</h1>
    <button id="btn">显示load_test_server页面元素</button>
    <div id="show"></div>
    <script src="static/jquery.min.js"></script>
    <script>
        $(function(){
            $('#btn').click(function(){
                //load加载到指定页面的全部内容到#show
                // $('#show').load('/load_server');
                //load加载指定的元素
                // $('#show').load('/load_server #btn2');
                //uname=lalala&age=20  Query string 查询字符串
                // $('#show').load('/load_server','uname=lalala&age=20')  发送get请求

                //使用js对象  发送post请求
                //如果服务路由地址不接受post请求 响应吗是405
                // Content-Type: application/x-www-form-urlencoded; charset=UTF-8
                // $('#show').load('/load_server',{'uname':"lalala"});

                // $('#show').load('/load_server',function(){
                //     alert('i am callback function');
                // $('#show').load('http://tmooc.cn');测试远程页面  会被浏览器拦截
                // })
            })
        })
    </script>
</body>
第二个html页面
<body>
    <button id="btn1">this is jquery load server1</button>
    <button id="btn2">this is jquery load server2</button>
    <button id="btn3">this is jquery load server3</button>
</body>

1.浏览器访问出来如下页面，点击btn，出现下边页面

在这里插入图片描述

在load中添加参数

     uname=lalala&age=20  Query string 查询字符串
     $('#show').load('/load_server','uname=lalala&age=20')  发送get请求
     如下图片

在这里插入图片描述
2$.get通过get 方式异步的向远程地址发送请求

<body>
    <button id="btn">jq_ajax_get</button>
    <div id="show"></div>
    <script src="static/jquery.min.js"></script>
    <script>
        $(function(){
            $('#btn').click(function(){
                var prams={uname:"夜无双",age:6000};
                $.get('/get_server',prams,function(response){
                    console.log(response)//json字对象
                    // 报错原因 对一个JSON对象再次进行JSON.parse()
                    // VM381:1 Uncaught SyntaxError: Unexpected token o in JSON at position 1
                    // var json_str=JSON.parse(response);//转成json对象
                    $(show).html(response.msg);
                },'json')
                
            })
        })
    </script>
</body>

3.$.post 方式异步的向远程地址发送请求

<body>
    <div>姓名<input type="text" id="uname"></div>
    <div>年龄<input type="text" id="age"></div>
    <button id="btn">提交</button>
    <script src="static/jquery.min.js"></script>
    <script>
        $(function(){
            $('#btn').click(function(){
                var parms={
                    'uname':$('#uname').val(),
                    'age':$('#age').val()
                }
                $.post('/post',parms,function(r){
                    console.log(r);
                    alert(r.msg);

                })
            })
        })
    </script>

flask搭建服务端，用于接收前端页面，给出响应

from flask import Flask,render_template,request
import json
app=Flask(__name__,)
@app.route('/load')
def load_view():
    return render_template('load_test.html')
@app.route('/load_server',methods=['post','get'])
def load_server_view():
    return render_template('load_test_server.html')

@app.route('/get',methods=['post','get'])
def get_view():
    return render_template('jq_get.html')
@app.route('/get_server')
def get_server():
    uname=request.args.get('uname',-1)
    age=request.args.get('age',-1)
    s= 'name is %s,age is %s'%(uname,age)
    #设置响应头中的数据类型的格式为json格式
    return json.dumps({'code':200,'msg':s}),{'Content-Type':'application/json'}


@app.route('/post',methods=['get','post'])
def post_view():
    if request.method=='GET':
        return render_template('jq_post.html')
    elif request.method=='POST':
        #根据用户年龄显示不同结果
        data={'code':1200,'msg':'post is ok'}
        if int(request.form.get('age',0))>100:
            data={'code':1201,'msg':'you age is so big!'}
        return data#flask1.1 支持直接返回字典


@app.route('/ajax')
def ajax_view():
    return render_template('jq_ajax.html')
@app.route('/ajax_server',methods=['get','post'])
def ajax_server():
    if request.method=='GET':
        import time
        time.sleep(1.5)
        data={'code':1200,'msg':'OK!'}
        return data
    elif request.method=="POST":
        # uname=request.form.get('uname')表单格式提交的数据
        uname=request.json.get('uname')#json格式数据
        data={'code':1200,'msg':'欢迎您:%s'%uname}
        return data

@app.route('/cross')
def cross_view():
    return render_template('cross.html')
if __name__ == "__main__":
    app.run(debug=True)

4.$.ajax 与上边get post用法一致

<body>
    <div>
        用户名<input type="text" id="uname">
    </div>
    <span id="loading" style="display: none">加载中....</span>
    <button id="btn" >JQUERY AJAX GET</button>
    <button id="btn2">jquery ajax post</button>
    <script src="static/jquery.min.js"></script>
    <script>
        $(function(){
            $("#btn2").click(function(){
                $.ajax({
                    url:'/ajax_server',
                    type:'post',
                    dataType:'json',
                    contentType:'application/json;charset=utf-8;',
                    data:JSON.stringify({uname:$("#uname").val()}),
                    success:function(r){
                        alert(r.msg);
                    },
                    error:function(){
                        alert('系统繁忙,请稍候再试');
                    },
                    // beforeSend:function(XMLHttpRequest){
                    //     XMLHttpRequest.setRequestHeader('Content-Type','application/json')
                    // }

                })
            })
        })
        $(function(){
            $('#btn').click(function(){
                $.ajax({
                    url:'/ajax_server',
                    type:'get',
                    async:true,
                    dataType:'json',
                    success:function(r){
                        console.log(r);
                        //在响应成功后恢复摁扭
                        $('#btn').removeAttr('disabled');
                        $('#loading').hide();
                    },
                    error:function(){
                        alert('Server is busy');
                        $('#btn').removeAttr('disabled');
                    },
                    beforeSend:function(){
                        //防止用户重复提交
                        //再发送请求之前禁言摁扭
                        $('#btn').attr('disabled','disabled');
                        $('#loading').show();

                    }
                })
            })
        })
    </script>
</body>

5.跨域操作

<body>
    <button id="btn">跨域请求</button>
    <div id="show"></div>
    <script src="static/jquery.min.js"></script>
    <script>
        function a(data){
            console.log(data);
        }
        $(function(){
            $('#btn').click(function(){
                $.ajax({
                    url:'http://127.0.0.1:5001/get-json',
                    type:'get',
                    dataType:'jsonp',
                    jsonp:'callback',
                    jsonpCallback:'a'
                }
                )
            })
        })
        // $(function(){
        //     $('#btn').click(function(){
        //         // $.get('http://127.0.0.1:5001/get',function(data){
        //         //     console.log(data);
        //         // })
        //         //js原声跨域
        //         //创建一个script标签 通过src属性请求服务器地址
        //         var script=document.createElement('script');
        //         script.src='http://127.0.0.1:5001/get?callback=print'
        //         //在请求的过程中提供一个函数名
        //         //服务器端接函数名 将服务器的数据和函数名拼接
        //         //函数名（+数据+）
        //         //将script插入到body中
        //         document.body.append(script);
        //     })
        // })
    </script>
</body>

跨域操作相对应端口5001的服务器

from flask import Flask,request
import json
app=Flask(__name__,)
@app.route('/get')
def get_view():
    fun=request.args.get('callback')
    data= '这是5001端口返回的响应'
    return fun+'("'+data+'")'
@app.route('/get-json')
def get_json():
    fun=request.args.get('callback')
    data={'code':1200,'msg':'OK!'}
    return fun+'('+json.dumps(data)+')'


if __name__ == "__main__":
    app.run(debug=True,port=5001)

ambition_star

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery对 ajax 的支持

1.$obj.load() 作用：载入远程的HTML文件到指定的元素中$obj.load(url,data,callback) $obj:显示响应内容的jq元素 url:请求地址 data:请求参数(可省略) 方式1:字符串传参 "key1=value1&key2=value2" 注：此种传参会使用 get 方式发送请求方式2:使用JS对象传参 { ...
复制链接

扫一扫