• 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 + "
    Status: " + 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 + "
    Status: " + 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 仍在运行!");
            });
        });
    
  • 相关阅读:
    vue单页面项目返回上一页无效,链接变化了,但是页面没有变化
    H5页面在iOS网页中的数字被识别为电话号码,字体颜色变黑色,且颜色不可改变
    vue-quill-editor 封装成组件;图片文件流上传;同一页面多个编辑器样式异常解决办法
    React 从零搭建项目 使用 create-react-app脚手架
    使用git pull文件时和本地文件冲突怎么办?
    webpack打包vue项目,资源路径如何从绝对路径改为相对路径?css中的图片资源如何修改配置?
    前端使用JS-SDK上传图片(文件)到七牛
    vue图片裁剪插件vue-cropper
    小程序图片裁剪组件
    微信小程序1rpx border ios真机显示不全问题
  • 原文地址:https://www.cnblogs.com/kuai-man/p/10793879.html
Copyright © 2020-2023  润新知