jq04--jq与ajax

之前我们学习了一些有关jq函数的知识,现在我们看看jq与ajax方面的一些东西:

1.ajax(Asynchronous JavaScript and XML 异步的JavaScript与xml):
    在不重载整个网页的情况下,ajax通过发送请求获取后台数据,显示在页面上。注意ajax并不是一种新的编程语言,而是使用现有标准的新方法。

2.jq与ajax:
    jq提供多个与ajax有关的方法。通过jQuery AJAX方法,您能够使用HTTP Get和HTTP Post从远程服务器上
请求文本、HTML、XML或JSON,可以把这些外部数据直接载入网页的被选元素中。
    如果没有jq,ajax编程并不容易。因为不同的浏览器,ajax的实现方式不一样,这通常意味着我们需要编写
额外的代码对浏览器进行测试。jq已经解决了这个问题,我们只需要一行代码即可进行ajax请求

3.load()方法:
    $(selector).load(URL,data,callback);简单而强大的ajax方法,从服务器加载数据,并把返回的数据放入被选元素中
    URL:        必选,请求URL
    data:        可选,请求参数对象
    callback:    可选,回调函数

    //把文件"demo_test.txt"的内容加载到指定的<div>元素中
    $("#div1").load("demo.txt");        
    //把文件"demo_test.txt"中id="p1"的元素的内容,加载到指定的<div>元素中
    $("#div1").load("demo.txt #p1");
  

    可选的callback回调函数可以设置三个参数:
        responseTxt - 包含调用成功时的结果内容
        statusTXT   - 包含调用的状态
        xhr         - 包含 XMLHttpRequest 对象

    $("button").click(function(){
        $("#div1").load("demo.txt",function(responseTxt,statusTXT,xhr){
            if("success"==statusTXT){
                alert("内容加载成功");
            }else if("error"==statusTXT){
                alert("Error: "+xhr.status+": "+xhr.statusText);
            }
        });
    });

   
4.GET与POST:
    $.get(URL,callback):
    $.post(URL,data,callback):

    //$.get()方法从服务器上的一个文件中取回数据
    $("button").click(function(){
        $.get("demo.asp",function(data,status){
            alert("Data: " + data + "\nStatus: " + status);
            });
        }
    );
    
    //ASP文件("demo.asp")类似这样:
    <%
        response.write("This is some text from an external ASP file.")
    %>

  

    //使用$.post()连同请求一起发送数据
    $("button").click(function(){
        $.post("demo.asp",
            {
                name:"Donald Duck",
                city:"Duckburg"
            },
            function(data,status){
                alert("Data: " + data + "\nStatus: " + status);
            }
        );
    });
    
    //ASP文件("demo.asp")类似这样:
    <%
        dim fname,city
        fname=Request.Form("name")
        city=Request.Form("city")
        Response.Write("Dear " & fname & ". ")
        Response.Write("Hope you live well in " & city & ".")
    %>

   
参考链接(get与post的区别):
    https://www.cnblogs.com/logsharing/p/8448446.html

5.noConflict():

我们使用$作为jQuery的简写,当其他js框架也使用“$”作为简写时,如何才能避免冲突呢?使用noConflict()方法。noConflict()方法会释放$标识符的控制,这样其他脚本就可以使用它了。

    //通过全名替代简写的方式来使用jQuery
    $.noConflict();
    jQuery(document).ready(function(){
        jQuery("button").click(function(){
            jQuery("p").text("jQuery 仍在运行!");
        });
    });
    
    //noConflict()可返回对jQuery的引用,可以把它存入变量,以供稍后使用
    var jq = $.noConflict();
    jq(document).ready(function(){
        jq("button").click(function(){
            jq("p").text("jQuery 仍在运行!");
        });
    });
    
    //把$符号作为变量传递给ready(),在函数内使用$符号,而在函数外,使用 "jQuery"
    $.noConflict();
    jQuery(document).ready(function($){
        $("button").click(function(){
            $("p").text("jQuery 仍在运行!");
        });
    });

 

posted @ 2019-04-30 03:05  快与慢  阅读(215)  评论(0编辑  收藏  举报