zoukankan      html  css  js  c++  java
  • $.ajax() ,$.post(),$.get() 的基本用法

    编写代码的过程中,我们会用到一些的需要局部刷新,而且需要数据传递的情况,我们通常是有$.ajax() ,$.post(),$.get() 这三种方式。

    $.ajax()方法通过 HTTP 请求加载远程数据。

    最简单的情况下,$.ajax() 可以不带任何参数直接使用。

    注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

    复制代码
    $.ajax({
          type: "POST",      //data 传送数据类型。post 传递
          dataType: 'json',  // 返回数据的数据类型json
          url: "/site/abc",  // yii 控制器/方法
          cache: false,      
          data: {tel: tel},  //传送的数据
          error:function(){
             alert("数据传输错误");
          },success: function (data) {
             if(window.console){
                console.log(data);
             }
          }
    })         

    复制代码

    $.ajax 的属性:【详解】http://www.w3school.com.cn/jquery/ajax_ajax.asp

    dataType

    类型:String

    预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。在 1.4 中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:

    • "xml": 返回 XML 文档,可用 jQuery 处理。
    • "html": 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。
    • "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)
    • "json": 返回 JSON 数据 。 输出 数据(yii控制器中)
      1
      2
      3
      public function(){
            echo CJSON::encode($message);
      }

        

    • "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
    • "text": 返回纯文本字符串

    data

    类型:String

    发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

    error

    类型:Function

    默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。

    有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。

    如果发生了错误,错误信息(第二个参数)除了得到 null 之外,还可能是 "timeout", "error", "notmodified" 和 "parsererror"。

    这是一个 Ajax 事件。

    $.post() 方法通过 HTTP POST 请求从服务器载入数据。【详细】http://www.w3school.com.cn/jquery/ajax_post.asp

    语法:

    jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

    参数描述
    url 必需。规定把请求发送到哪个 URL。
    data 可选。映射或字符串值。规定连同请求发送到服务器的数据。
    success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。
    dataType

    可选。规定预期的服务器响应的数据类型。

    默认执行智能判断(xml、json、script 或 html)。

    例子:

    向页面 test.php 发送数据,并输出结果(HTML 或 XML,取决于所返回的内容):

    1 $.post("test.php", { name: "John", time: "2pm" },
    2    function(data){
    3      alert("Data Loaded: " + data);
    4    });

    $.get()  【详细】http://www.w3school.com.cn/jquery/ajax_get.asp

    例子:

    1 $("button").click(function(){
    2   $.get("demo_ajax_load.txt", function(result){
    3     $("div").html(result);
    4   });
    5 });

    例子 1

    请求 test.php 网页,传送2个参数,忽略返回值:

    $.get("test.php", { name: "John", time: "2pm" } );

    例子 2

    显示 test.php 返回值(HTML 或 XML,取决于返回值):

    $.get("test.php", function(data){
      alert("Data Loaded: " + data);
    });

    例子 3

    显示 test.cgi 返回值(HTML 或 XML,取决于返回值),添加一组请求参数:

    $.get("test.cgi", { name: "John", time: "2pm" },
      function(data){
        alert("Data Loaded: " + data);
      });
     
  • 相关阅读:
    SSM商城项目(二)
    SSM商城项目(一)
    Solr
    Lucene
    TP5分页函数paginate中的each()传参
    微信小程序+php 授权登陆,完整代码
    thinkphp5 + barcode 生成条形码
    微信小程序-获取当前位置和城市名
    PHP查询附近的人及其距离的实现方法
    thinkphp5连接sql server
  • 原文地址:https://www.cnblogs.com/wendi/p/12455312.html
Copyright © 2011-2022 走看看