jquery发送

最新推荐文章于 2022-11-08 15:50:36 发布

在线小白www

最新推荐文章于 2022-11-08 15:50:36 发布

阅读量105

点赞数

分类专栏： jQuery

原文链接：https://blog.csdn.net/jinixin/article/details/80042763

版权

jQuery 专栏收录该内容

109 篇文章 3 订阅

订阅专栏

转载：https://blog.csdn.net/jinixin/article/details/80042763

1. 概述

Ajax用于浏览器与服务器通信而无需刷新整个页面，服务器将不再返回整个页面，而是返回少量数据，通过javascript DOM更新一部分节点。期间数据传输可采用xml，json等格式，Ajax最早用于谷歌的搜索提示。

其实不刷新整个页面便可与服务器通信的方法很多，比如Flash，Java applet，iframe等，但Ajax是目前最常见的一种。

我们可以用javascript扩展对象XMLHTTPRequest实现Ajax，对于这种方法在这里不做介绍，下面直接了解jquery实现Ajax的几种方法。

2. 数据格式

浏览器与服务器之间传输数据所采用的格式，比较常见的有xml，html，text，json，jsonp等，目前json由于占用更小存储，且是javascript原生格式，因此很受欢迎。

当确定数据传输采用json格式后，下面就需要考虑序列化问题了。

网络汇总传输的都是文本字符串（其实是二进制比特流），因此在想网络通道中写入数据时，都需要先序列化json对象为文本字符串。而从我拿过来通道中读取数据时，都需要反序列化文字符串为json对象。

如果确定数据格式是json，js也需要对服务器返回的数据进行反序列化，即把json样式的字符串变成json对象。

    var json_str = '{"result": "hello, world!"}';
    var json_object = eval("(" + json_str + ")");  // 法一，使用eval函数，注意括号
    var json_object = jQuery.parseJSON(json_str);  // 法二，使用jQuery的parseJSON函数

    console.log(json_object.result);   // hello, world!  反序列化成功，输出结果

3. $.ajax()

形式：$.ajax({ url : " ", ...})

字段解释：

1. url：链接地址，字符串表示

2. data：需要发送到服务器的数据，get、post都可以。

3. type：请求类型，“POST”或“GET”，默认“GET”

4. timeout：请求超时时间，单位为毫秒

5. cache：是否缓存请求结果，Boolean表示，默认为true

6. contentType：默认 "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

7. dataType：服务器响应的数据类型，字符串表示。当填写为json时，回调函数中无需在对数据反序列化为json。

8. success：请求成功后，服务器的回调函数

9. error：请求失败后，服务器的回调函数

10. complete：请求完成后调用的函数，无论请求失败还是成功，都会调用该函数。

11. async：是否异步处理，Boolean表示，默认true。若设置为false，js不会向下执行，而是原地等待服务器返回数据，并完成相应的回调函数后，再向下执行。

12. username：访问认证请求中携带的用户名，字符串表示

13. password：返回认证请求中携带的密码，字符串表示

$.ajax({
    url: "/greet",
    data: {"username": name},
    type: "POST",
    dataType: "json",
    success: function(data) {
        // data = jQuery.parseJSON(data);  //dataType指明了返回数据为json类型，故不需要再反序列化
        ...
    }
});

4. $.post()

该方法使用POST方式执行Ajax请求，从服务器加载数据

形式：$.post(url，data，func，dataType)

参数解释：

1. url：链接地址

2. data：需要发送到服务器的数据

3. func：请求成功后，服务器回调的函数。function(data , status , xhr)，其中data为数据服务器回传的数据，status为响应状态，xhr为XMLHTTPRequest对象。

$.post(
    "/greet",
    {name: 'Brad'},
    function(data) {
        ...
    },
    "json"
);

5. $.get()

该方法使用get方式执行ajax请求，从服务器加载数据

形式：$.get(url , data , func , dataType)

其各个参数所示意义与$.post()一致。

$.get(
    "/greet",
    {name: 'Brad'},
    function(data) {
        ...
    },
    "json"
);

以上三个是jquery中发送Ajax请求较为重要的方法，下面再选择三个较为常见的方法。

6. $.getJSON()

该方法使用GET方式执行Ajax请求，从服务器加载JSON格式数据。

形式：$.getJSON(url, data, func);

因为确定服务器返回json编码的数据，故相较于$.get()不必再指定dataType。

$.getJSON(
    "/greet",
    {name: 'jenny'},
    function(data) {
        ...
    }
);

7. $.load()

该方法将服务器加载的数据直接插入到指定DOM中。

形式：$.load(url, data, func);

其中data如果存在则使用POST方式发送请求，不存在则使用GET方式发送请求。

<div id="ret"></div>
$('#ret').load(
    "/greet",
    {name: 'Brad'}
);

8. $.getScript()

该方法使用GET方式执行Ajax请求，从服务器加载并执行回传的JavaScript。

形式：$.load(url, func);

代码

下面使用Python Flask与jQuery对这6个Ajax方法做简单演示，jQuery为1.11.3版本。

后端Python：

#!/usr/bin/env python
# coding=utf-8
 
import json
from flask import Flask, request, render_template as rt
 
app = Flask(__name__)
 
 
@app.route('/', methods=['GET'])
def index():
    return rt('greet.html')
 
 
@app.route('/greet', methods=['GET', 'POST'])
def greet():
    # GET上传的数据用request.args获取，POST上传的数据用request.form获取
    if request.method == 'GET':
        name = request.args.get('name')
        ret = {'result': 'hi, %s' % name}
    else:
        name = request.form.get('name')
        ret = {'result': 'hello, %s' % name}
 
    return json.dumps(ret)
 
 
if __name__ == '__main__':
    app.run(debug=True)

前端：

<html>
<body>
<button οnclick="login1()">发送1</button>
<button οnclick="login2()">发送2</button>
<button οnclick="login3()">发送3</button>
<button οnclick="login4()">发送4</button>
<button οnclick="login5()">发送5</button>
<div id="ret"></div>
<script type="text/javascript" src="{{ url_for('static', filename='jquery.min.js') }}"></script>
<script type="text/javascript">
    function login1() {
        $.ajax({
            url: "{{ url_for('greet') }}",
            data: {name: 'jenny'},
            type: "POST",
            //dataType: "json",
            success: function(data) {
                // data = eval("(" + data+ ")");
                data = jQuery.parseJSON(data);  // dataType注释了，故注意反序列化
                $("#ret").text(data.result);
            }
        });
    }
 
    function login2() {
        $.get(
            "{{ url_for('greet') }}",
            {name: 'Brad'},
            function(data) {
                $("#ret").text(data.result);
            },
            "json"
        );
    }
 
    function login3() {
        $.getJSON(
            "{{ url_for('greet') }}",
            {name: 'jenny'},
            function(data) {
                $("#ret").text(data.result);
            }
        );
    }
 
    function login4() {
        $.post(
            "{{ url_for('greet') }}",
            {name: 'Brad'},
            function(data) {
                $('#ret').text(data.result);
            },
            "json"
        );
    }
 
    function login5() {
        $('#ret').load(
            "{{ url_for('greet') }}",
            {name: 'Brad'}
        );
    }
 
</script>
</body>
</html>

在线小白www

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery发送

转载：https://blog.csdn.net/jinixin/article/details/800427631. 概述Ajax用于浏览器与服务器通信而无需刷新整个页面，服务器将不再返回整个页面，而是返回少量数据，通过javascript DOM更新一部分节点。期间数据传输可采用xml，json等格式，Ajax最早用于谷歌的搜索提示。其实不刷新整个页面便可与服务器通信的方法很多，比如Flash，Java applet，iframe等，但Ajax是目前最常见的一...
复制链接

扫一扫

专栏目录