为了账号安全,请及时绑定邮箱和手机立即绑定

jQuery基础(五)一Ajax应用与常用插件

陶老实 其它
难度中级
时长 3小时20分
学习人数
综合评分9.40
97人评价 查看评价
9.6 内容实用
9.2 简洁易懂
9.4 逻辑清晰
  • 使用ajax()方法是最底层、功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值,它的调用格式如下:

    jQuery.ajax([settings])$.ajax([settings])

    其中参数settings为发送ajax请求时的配置对象,在该对象中,url表示服务器请求的路径,data为请求时传递的数据,dataType为服务器返回的数据类型,success为请求成功的执行的回调函数,type为发送数据请求的方式,默认为get。


    $.ajax({

                            url:http://www.imooc.com/data/check.php

                            data: { num: $("#txtNumber").val() },

                            type : "POST",

                            success: function (data) {

                                $("ul").append("<li>你输入的<b>  "

                                + $("#txtNumber").val() + " </b>是<b> "

                                + data + " </b></li>");


    查看全部
  • 使用serialize()方法可以将表单中有name属性的元素值进行序列化,生成标准URL编码文本字符串,直接可用于ajax请求,它的调用格式如下:

    $(selector).serialize()

    其中selector参数是一个或多个表单中的元素或表单元素本身。

      $("#litest").html($("form").serialize());

    查看全部
  • get()方法相比,post()方法多用于以POST方式向服务器发送数据,服务器接收到数据之后,进行处理,并将处理结果返回页面,调用格式如下:

    $.post(url,[data],[callback])

    参数url为服务器请求地址,可选项data为向服务器请求时发送的数据,可选项callback参数为请求成功后执行的回调函数。


    查看全部
  • 使用get()方法时,采用GET方式向服务器请求数据,并通过方法中回调函数的参数返回请求的数据,它的调用格式如下:

    $.get(url,[callback])

    参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。


    查看全部
  • 使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数据,并对获取的数据进行解析,显示在页面中,它的调用格式为:

    jQuery.getJSON(url,[data],[callback])$.getJSON(url,[data],[callback])

    其中,url参数为请求加载json格式文件的服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。


    查看全部
  • 使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为:

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

    参数url为加载服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。

    例如,点击“加载”按钮时,向服务器请求加载一个指定页面的内容,加载成功后,将数据内容显示在<div>元素中,并将加载按钮变为不可用


    查看全部
  • <!DOCTYPE html>

    <html>

        <head>

            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

            <title>挑战题</title>

             <script src="https://libs.baidu.com/jquery/1.8.2/jquery.js" type="text/javascript"></script>

        </head>

        <body>

            <div>

                <input type="button" id="showBtn" value="显示内容"/>

            </div>

            <ul id="showMessage">

                

            </ul>

            <script type="text/javascript">

                var jsonStu = [{

                    name: "zhangsan",

                    score: "100"

                },

                {

                    name: "lisi",

                    score: "99"

                },

                {

                    name: "wangwu",

                    score: "88"

                }];

                

                $("#showBtn").click(function(){

                    $.each(jsonStu,function(index,value){

                        $("#showMessage").append("<li>name:"+value["name"]+"<br/>"+"score:"+value["score"]+"</li>")

                    })

                })

            </script>

        </body>

    </html>


    查看全部
    0 采集 收起 来源:编程练习

    2018-06-29

  • $.fn.extend 扩展的是jquery对象的方法

     $.extend 扩展的是jquery整个类的方法

    查看全部
    0 采集 收起 来源:编程挑战

    2018-06-17

  • path 是保存cookie值的路径,默认与创建页的路径一致

    expires 是有限日期,单位是(天)


    查看全部
  • var options = {      type:'post',           //post提交      url: " "   ,        dataType:"json",        //json格式      data:{'name':name,....},    //如果需要提交附加参数,视情况添加      clearForm: true,        //成功提交后,清除所有表单元素的值      resetForm: true,        //成功提交后,重置所有表单元素的值      cache:false,                async:false,          //同步返回      success:function(data){        //服务器端返回处理逻辑      },      error:function(XmlHttpRequest,textStatus,errorThrown){        alert('操作失败');      }    };        两种表单提交API        // ajaxForm        $("#form1").ajaxForm(options);        // ajaxSubmit        $("#btn").click(function () {            $("#form1").ajaxSubmit(options);        });



    查看全部
  • $.get(url,[data],[callback],[type])

         url:待载入页面的URL地址

         data:待发送 Key/value 参数。

         callback:载入成功时回调函数。

         type:返回内容格式,xml, html, script, json, text, _default。


    查看全部
  • ajaxStart()ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数,ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为:

    $(selector).ajaxStart(function())$(selector).ajaxStop(function())

    其中,两个方法中括号都是绑定的函数,当发送Ajax请求前执行ajaxStart()方法绑定的函数,请求成功后,执行ajaxStop ()方法绑定的函数。


    查看全部
  • 使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项值,它的调用格式为:

    jQuery.ajaxSetup([options])$.ajaxSetup([options])

    可选项options参数为一个对象,通过该对象设置Ajax请求时的全局选项值。


    查看全部
  • 使用ajax()方法是最底层、功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值,它的调用格式如下:

    jQuery.ajax([settings])$.ajax([settings])

    其中参数settings为发送ajax请求时的配置对象,在该对象中,url表示服务器请求的路径,data为请求时传递的数据,dataType为服务器返回的数据类型,success为请求成功的执行的回调函数,type为发送数据请求的方式,默认为get。


    查看全部
  • 使用serialize()方法可以将表单中有name属性的元素值进行序列化,生成标准URL编码文本字符串,直接可用于ajax请求,它的调用格式如下:

    $(selector).serialize()

    其中selector参数是一个或多个表单中的元素或表单元素本身。


    查看全部

举报

0/150
提交
取消
课程须知
1、有HTML/CSS基础 2、有JavaScript基础
老师告诉你能学到什么?
1、jQuery中的ajax应用 2、jQuery中的插件 3、jQuery中的工具类函数

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!