zoukankan      html  css  js  c++  java
  • jQuery之Ajax之一

    这里先要讲下什么是Ajax。待续。

    今天这里只讲Ajax请求的一部分,以后有用到别的在续写。

    1、jQuery.get( url, [data], [callback] ):使用GET方式来进行异步请求。这个我之前是有用过滴。但理解有些偏差。这里先将下正确的。

    url即要传递的地址、date是参数、callback是回调函数(只有当Response的返回状态是success才是调用该方法)。

    注意点:

    callback是得到的返回值(date)是由Response返回的,故在在类别修改是时候为什么要用:context.Response.Write("true");而不是return true。

    我之前的修改类别名用的就是get方法,当时有用到了两个参数,其实是可以用date来传递的,然后还是用Required来获取。那么这个就没有什么好说的了,自己看之前写的。

     

    2、jQuery.post(url,[date],[callback],[type]);

    较之于get方法,好像多了个type。感觉跟get差不多。现在摘录下一网友的例子,设计的简单明了。

    Response.ContentType = "application/json";
    Response.Write("{result: '" + Request["Name"] + ",你好!(这消息来自服务器)'}");
    

    jQuery代码:

    $.post("Ajax.aspx", { Action: "post", Name: "lulu" },
    
    function (data, textStatus){
    
    // data 可以是 xmlDoc, jsonObj, html, text, 等等.
    //this; // 这个Ajax请求的选项配置信息,请参考jQuery.get()说到的this
    alert(data.result);
    
    }, "json");
    

    上面的type就是json了。

    3、jQuery. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中。  

    这个有点怪,如果不是现在IE下测试就会显示不出来。我怀疑出现浏览器兼容问题。下载吧我做的一个简单的:

    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Insert title here</title> 
    <script type="text/javascript" src="../JS/jquery-1.3.2-vsdoc2.js"></script></head> 
    <body> 
    
    <input type="button" id="send" value="Ajax获取" /> 
    <div id="resText" class=".ajax.load">
    dddd
    </div> 
    
    <script type="text/javascript">
    $(function(){
    $("#send").click(function(){ 
    $("#resText").load("test.html .para);
    }
    </script>
    </body> </html>

    下面自然是text.html了

    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Insert title here</title> 
    </head> 
    <body> 
    
    <div class="comment"> 
    已有评论: 
    </div> 
    <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> 
    </body> 
    </html>
    

    先做到这里,今天做得有点晕。

    继续补充下,jQuery.getScript(url,callback) 第二参数个可选。

    <body>
    <button id="go">» Run</button>
    <div class="block"></div> 
    <script type="text/javascript">
    $(function(){
    jQuery.getScript("../JS/test.js", 
    function(){
      $("#go").click(function(){
        $(".block").animate( { backgroundColor: 'pink' }, 1000)
          .animate( { backgroundColor: 'blue' }, 1000);
      });
    });
    //alert("sss");
    })
     
     
    </script>
    </body>
    

    我的test.js只是简单的做了个输出alert("ddd");

    同上还是出现在IE可以在其他浏览器不行。

     

  • 相关阅读:
    linux
    day01-02
    测试基础
    cookie session
    多表表与表关系 增删改查 admin
    连接数据库 创建表 字段和参数 增删改查
    LeetCode OJ:Triangle(三角形)
    LeetCode OJ:Unique Paths II(唯一路径II)
    LeetCode OJ:Unique Paths(唯一路径)
    使用双栈实现一个队列
  • 原文地址:https://www.cnblogs.com/huaizuo/p/2119480.html
Copyright © 2011-2022 走看看