zoukankan      html  css  js  c++  java
  • Ajax Step By Step1

    Ajax 最关键的地方,就是实现异步请求、接受响应及执行回调。

    jQuery 对 Ajax 做了大量的封装,不需要去考虑浏览器兼容性, 对于封装的方式,jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装了第二层有三种方法:.load()、$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法。

    第一.【.load()方法】

    参数的使用step by step(load 有三个(URL +data+callback) +  type )

     (1)如果想让 Ajax 异步载入一段 HTML 内容,我们只需要一个 HTML 请求的 url 即可。

     //HTML   展示的页面(我们可见的部分)
    <input type="button" value="异步获取数据"/> 
    <div id="box"></div>
    //jQuery
     $('input').click(function()
    { 
    $('#box').load('test.html'); // test.html 是一个url路径 此时仅仅是载入数据
    });
     //test.html 内容
    <html>
    <head>
    <body>
        <div>
      <span>我是异步加载数据时需要的内容,我在另一个界面</span>
         </div>
    </body>
    </head>
    </html>

    (2)如果是服务器文件。一般不仅需要载入数据(url),还需要向服务器提交数据,那么我们就可以使用第二个可选参数 data。。向服务器提交数据有两种方式:get 和 post。

        (2.1)不传递 data,则默认 get 方式.

     $('input').click(function()
    { 
    $('#box').load('test.php?url=www.ww');
     })

    //get方式接受的服务器端

         (2.2)传递 data 用来在服务器端做判断

          

    $('input').click(function()
    {
    $('#box').load('test.php',
    { 
    url:'www.www' 
    });
    });
    //post 方式接受的 服务器端

    注:test.php 是和服务器端交互的路径,可更加自己的要求配置。

    (3)Ajax 数据载入完毕之后,就能执行回调函数 callback,也就是第三个参数。

    回调函数 也可以传递三个可选参数:

        responseText(请求返回)、

        textStatus(请求状态)、

        XMLHttpRequest (XMLHttpRequest 对象)。

    $('input').click(function()
    { $('#box').load('test.php(和服务器交互的路径)',
    { 
    url:'www.www' 
    },function(response,status,xhr)//回调函数
    { 
    alert('返回的值为:'+response+',状态为:'+status +', 状态是:'+xhr.statusText);//用于调试查看,在页面上打印出来
     }); 
    });

    总结:::总结:.load()方法有三个参数::url,data,callback

  • 相关阅读:
    获取屏幕的大小
    ../ ./ ~/三者的区别
    C#在splitContainer1控件和panel控件中显示窗体
    C# 后台动态添加标签(span,div) 以及模板添加
    input text文本框内部最后面放一个按钮
    dubbo常见异常及解决方式
    [LeetCode] 206. Reverse Linked List ☆(反转链表)
    [LeetCode] 328. Odd Even Linked List ☆☆☆(奇偶节点分别放一起)
    [LeetCode] 283. Move Zeroes ☆(移动0到最后)
    [LeetCode] 219. Contains Duplicate II ☆(存在重复元素2)
  • 原文地址:https://www.cnblogs.com/wfaceboss/p/6224453.html
Copyright © 2011-2022 走看看