zoukankan      html  css  js  c++  java
  • jQuery开发之Ajax

    1。load()方法
    (1)load()方法是jQuery中最经常使用和最简单的Ajax方法,能载入远程HTML代码,并插入代码中。

    它的结构为:

    load(url [,data] [,callback])

    load()方法解释例如以下表所看到的

    这里写图片描写叙述

    演示样例代码例如以下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GB18030">
    <title>jQuery test </title>
    <script type ="text/javascript" src ="jquery.js" ></script>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <script type ="text/javascript">
    $(document).ready(function(){
    
    
        $("#send").click(function(){
            $("#resText").load("test.html");
    
    
        });
    
    
    
    });
    
    </script>
    </head>
    <body>
    
    <div class ="comment">
    <h6>张三:</h6>
    <p class ="para">沙发</p>
    </div>
    <div class ="comment">
    <h6>李四:</h6>
    <p class ="para">板凳</p>
    </div>
    <div class ="comment">
    <h6>王五:</h6>
    <p class ="para">地板</p>
    </div>
    <input type ="button" id ="send" value ="Ajax获取" />
    <div class ="comment">已有评论:</div>
    <div id = "resText"></div>
    
    
    </body>
    </html>

    执行效果:
    没有单击button的时候
    这里写图片描写叙述
    单击button后
    这里写图片描写叙述

    (2) 筛选载入的html文档
    核心代码例如以下:

    $("resText").load("test.html .para")

    执行效果例如以下:
    这里写图片描写叙述

    (3)传递方式
    load()方法的传递方式依据data来自己主动指定。假设没有參数传递。则採用 GET方式传递。反之,则採用POST方式。演示样例代码例如以下:

    无參数传递是get方法
    $("resText").load("test.php",function(){
    
    })
    
    
    $("resText").load("test.php",{name:"rain",age:"22"},function(){
    
    })

    (4) 回调參数
    对于必须在载入完毕后再能进行的操作。load()方法提供了回调函数(callback),该函数有三个參数分别代表请求返回的内容,请求状态和XMLHttpRequest对象,jQuery代码例如以下:

    $("resText").load("test.php",function(responseText,textStatus,XMLHttpRequest){
    //responseText    返回的内容
    //textStatus    请求状态  success, error, notmodified,timeout
    //XMLHttpRequest对象
    })

    2。$.get()方法和$.post()方法
    $.get()方法使用GET方法进行异步请求。


    它的结构为:

    $.get(url [,data] [,callback] [,type])

    參数解释例如以下:
    这里写图片描写叙述

    $.post() 方法演示样例代码例如以下:
    这里写图片描写叙述

    3,$.getScript()方法 和$.getJson()方法
    (1), 有时候,在页面初次载入时取得所需的所有javaScript()文件是全然没有必要的。尽管能够在须要哪个 JavaScript的时候,动态的创建<script> 标签。jQuery代码例如以下:

    $(document.createElement("script")).attr("src","test.js").appendTo("head");

    或者

    $("<script type ='text/javaScript' src ='test.js'/>").appendTo("head");

    $.getScript() 更加的简单

    $.getScript("test.js")

    (2) $.getJson()方法
    jQuery演示样例代码例如以下:
    这里写图片描写叙述

    这里写图片描写叙述

    (4) $.ajax()方法

    $.ajax() 方法是jQuery中Ajax的最底层实现。结构为:

    $.ajax(options)

    參数说明例如以下:
    这里写图片描写叙述

    这里写图片描写叙述
    演示样例代码例如以下:

    $(function(){
    $("send").click(function(){
    $.ajax({
    type:"GET",
    url:"test.js",
    dataType:"script"
    });
    });
    })

    jQuery中Ajax全局事件还有其它几种。例如以下:
    这里写图片描写叙述
    注意:
    这里写图片描写叙述

  • 相关阅读:
    [BZOJ2839:]集合计数
    [BZOJ2863:]愤怒的元首
    [BZOJ:3162]:独钓寒江雪
    PHP数据库基础(简单的)
    PHP数组创建和遍历(基础)
    中缀表达式转换为前、后缀表达式转化简单的技巧[转]
    PHP网页简单的计算机源代码
    JS确认取消按钮使用
    js(JavaScript)使用${pageContext.request.contextPath}报错
    易游验证怎么配置?易游验证怎么使用!!
  • 原文地址:https://www.cnblogs.com/cxchanpin/p/7191897.html
Copyright © 2011-2022 走看看