zoukankan      html  css  js  c++  java
  • jQuery发送Ajax请求

    转自于:https://blog.csdn.net/jinixin/article/details/80042763

    平时工作中一直有接触jQuery发送Ajax请求,发现其种类繁多,在此总结几种常见jQuery的Ajax方法。

    概述

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

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

    我们可以使用JavaScript扩展对象XMLHttpRequest实现Ajax,对于这种方法在这里不做介绍,下面直接了解jQuery实现Ajax的几种方法。

    数据格式

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

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

    网络中传输的都是文本字符串(其实是二进制比特流,这里方便理解),因此在向网络通道中写入数据时,都需要先序列化json对象为文本字符串。而从网络通道中读取数据时,都需要反序列化文本字符串为json对象。在Python中json.dumps用于序列化,json.loads用于反序列化。

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

    1.  
      var json_str = '{"result": "hello, world!"}';
    2.  
      var json_object = eval("(" + json_str + ")"); // 法一,使用eval函数,注意括号
    3.  
      var json_object = jQuery.parseJSON(json_str); // 法二,使用jQuery的parseJSON函数
    4.  
       
    5.  
      alert(json_object.result); // 反序列化成功,输出结果

    下面就引出jQuery中发送Ajax请求的几个常见方法。



    $.ajax()

    该方法用于执行Ajax请求,常用于其他jQuery Ajax方法不能完成的请求,也许我们可以把它称为"jQuery中Ajax系列方法之母"。

    形式:$.ajax({name:val, name:val,...});
    可选字段:
    1)url:链接地址,字符串表示
    2)data:需发送到服务器的数据,GET与POST都可以,格式为{A: '...', B: '...'}
    3)type:"POST" 或 "GET",请求类型
    4)timeout:请求超时时间,单位为毫秒,数值表示
    5)cache:是否缓存请求结果,bool表示
    6)contentType:内容类型,默认为"application/x-www-form-urlencoded"
    7)dataType:服务器响应的数据类型,字符串表示;当填写为json时,回调函数中无需再对数据反序列化为json
    8)success:请求成功后,服务器回调的函数
    9)error:请求失败后,服务器回调的函数
    10)complete:请求完成后调用的函数,无论请求是成功还是失败,都会调用该函数;如果设置了success与error函数,则该函数在它们之后被调用
    11)async:是否异步处理,bool表示,默认为true;设置该值为false后,JS不会向下执行,而是原地等待服务器返回数据,并完成相应的回调函数后,再向下执行
    12)username:访问认证请求中携带的用户名,字符串表示
    13)password:返回认证请求中携带的密码,字符串表示
    不知道将最后两个放到data中去,是不是密码会以明文展示,因没有尝试过,这里不敢下结论。


    举例:

    1.  
      $.ajax({
    2.  
      url: "/greet",
    3.  
      data: {name: 'jenny'},
    4.  
      type: "POST",
    5.  
      dataType: "json",
    6.  
      success: function(data) {
    7.  
      // data = jQuery.parseJSON(data); //dataType指明了返回数据为json类型,故不需要再反序列化
    8.  
      ...
    9.  
      }
    10.  
      });



    $.post()

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

    形式:$.post(url, data, func, dataType);
    可选参数:
    1)url:链接地址,字符串表示
    2)data:需要发送到服务器的数据,格式为{A: '...', B: '...'}
    3)func:请求成功后,服务器回调的函数;function(data, status, xhr),其中data为服务器回传的数据,status为响应状态,xhr为XMLHttpRequest对象,个人感觉关注data参数即可
    4)dataType:服务器返回数据的格式


    举例:

    1.  
      $.post(
    2.  
      "/greet",
    3.  
      {name: 'Brad'},
    4.  
      function(data) {
    5.  
      ...
    6.  
      },
    7.  
      "json"
    8.  
      );



    $.get()

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

    形式:$.get(url, data, func, dataType);
    其各个参数所示意义与$.post()一致,在此不再列出,唯一区别就是请求类型是GET。


    举例:

    1.  
      $.get(
    2.  
      "/greet",
    3.  
      {name: 'Brad'},
    4.  
      function(data) {
    5.  
      ...
    6.  
      },
    7.  
      "json"
    8.  
      );


    上面三个是jQuery中发送Ajax请求较为重要的方法,下面再选择三个较为常见的方法,简单做解释。


    $.getJSON()

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

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

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


    举例:

    1.  
      $.getJSON(
    2.  
      "/greet",
    3.  
      {name: 'jenny'},
    4.  
      function(data) {
    5.  
      ...
    6.  
      }
    7.  
      );



    $.load()

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

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

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

    举例:

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



    $.getScript()

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

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

    代码

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

    后端Python:

    1.  
      #!/usr/bin/env python
    2.  
      # coding=utf-8
    3.  
       
    4.  
      import json
    5.  
      from flask import Flask, request, render_template as rt
    6.  
       
    7.  
      app = Flask(__name__)
    8.  
       
    9.  
       
    10.  
      @app.route('/', methods=['GET'])
    11.  
      def index():
    12.  
      return rt('greet.html')
    13.  
       
    14.  
       
    15.  
      @app.route('/greet', methods=['GET', 'POST'])
    16.  
      def greet():
    17.  
      # GET上传的数据用request.args获取,POST上传的数据用request.form获取
    18.  
      if request.method == 'GET':
    19.  
      name = request.args.get('name')
    20.  
      ret = {'result': 'hi, %s' % name}
    21.  
      else:
    22.  
      name = request.form.get('name')
    23.  
      ret = {'result': 'hello, %s' % name}
    24.  
       
    25.  
      return json.dumps(ret)
    26.  
       
    27.  
       
    28.  
      if __name__ == '__main__':
    29.  
      app.run(debug=True)

    前端:

    1.  
      <html>
    2.  
      <body>
    3.  
      <button οnclick="login1()">发送1</button>
    4.  
      <button οnclick="login2()">发送2</button>
    5.  
      <button οnclick="login3()">发送3</button>
    6.  
      <button οnclick="login4()">发送4</button>
    7.  
      <button οnclick="login5()">发送5</button>
    8.  
      <div id="ret"></div>
    9.  
      <script type="text/javascript" src="{{ url_for('static', filename='jquery.min.js') }}"></script>
    10.  
      <script type="text/javascript">
    11.  
      function login1() {
    12.  
      $.ajax({
    13.  
      url: "{{ url_for('greet') }}",
    14.  
      data: {name: 'jenny'},
    15.  
      type: "POST",
    16.  
      //dataType: "json",
    17.  
      success: function(data) {
    18.  
      // data = eval("(" + data+ ")");
    19.  
      data = jQuery.parseJSON(data); // dataType注释了,故注意反序列化
    20.  
      $("#ret").text(data.result);
    21.  
      }
    22.  
      });
    23.  
      }
    24.  
       
    25.  
      function login2() {
    26.  
      $.get(
    27.  
      "{{ url_for('greet') }}",
    28.  
      {name: 'Brad'},
    29.  
      function(data) {
    30.  
      $("#ret").text(data.result);
    31.  
      },
    32.  
      "json"
    33.  
      );
    34.  
      }
    35.  
       
    36.  
      function login3() {
    37.  
      $.getJSON(
    38.  
      "{{ url_for('greet') }}",
    39.  
      {name: 'jenny'},
    40.  
      function(data) {
    41.  
      $("#ret").text(data.result);
    42.  
      }
    43.  
      );
    44.  
      }
    45.  
       
    46.  
      function login4() {
    47.  
      $.post(
    48.  
      "{{ url_for('greet') }}",
    49.  
      {name: 'Brad'},
    50.  
      function(data) {
    51.  
      $('#ret').text(data.result);
    52.  
      },
    53.  
      "json"
    54.  
      );
    55.  
      }
    56.  
       
    57.  
      function login5() {
    58.  
      $('#ret').load(
    59.  
      "{{ url_for('greet') }}",
    60.  
      {name: 'Brad'}
    61.  
      );
    62.  
      }
    63.  
       
    64.  
      </script>
    65.  
      </body>
    66.  
      </html>

    文中如有不当之处,还望包容和指出,感谢~

  • 相关阅读:
    js截取字符串区分汉字字母代码
    List 去处自定义重复对象方法
    63. Unique Paths II
    62. Unique Paths
    388. Longest Absolute File Path
    41. First Missing Positive
    140. Word Break II
    139. Word Break
    239. Sliding Window Maximum
    5. Longest Palindromic Substring
  • 原文地址:https://www.cnblogs.com/Ao-min/p/14084982.html
Copyright © 2011-2022 走看看