jQuery与Ajax

load()方法

<script>
    $(function(){
        // $("#load").click(function(){
        //     $("#container").load("submit.html #jqAjax");
        // });
        $("#load").click(function(){
            var date = new Date();
            $("#container").load("submit.html #jqAjax",{currentDate:date},//如果没有传递参数,则默认是GET方式
            function(responseText,textStatus,XMLHttpRequest){//三个参数分别代表请求返回的内容、请求状态以及XHR对象
        //无论是否成功都会调用 console.log(responseText,textStatus,XMLHttpRequest,date); }); }); })
</script>

load方法通常用于从web服务器上取得静态的数据文件,在需要传递参数给服务器中的页面时需要用到$.get()/$.post()/$.ajax()方法

$.get()方法

$.get(url,[data],[callback],[type]),分别是请求页面的url地址、发送至服务器的键值对数据(会附加到url中)、载入成功时的回调函数以及期望服务器端返回内容的格式

var date = new Date();
    
        $("#load").click(function(){
            $.get("submit.html #jqAjax",{currentDate:date},function(data,textStatus,xhr){
                //data可以是xml、json、html文件片段
                //success、error、notmodefied、timeout
                //回调函数只有在数据成功返回,即success下才会调用
                var $tmp =  $(data).filter("#jqAjax");
                $("#container").html($tmp);//处理html格式的返回  data会返回整个界面
                console.log(data,textStatus,date,xhr,$tmp);
            },"html")
        })

不知道为什么,url写的是"submit.html #jqAjax",但还是会把整个页面都装载进去,data返回的也始终是整个页面,暂时先用filter()方法代替一下。

$.post()方法,与上一种方法类似,结构与使用方式都相同,但两者之间还有一些区别(以后单独整理一篇【】)

 $.Ajax(options)方法

options中以键值对的形式包含了该方法所需要的请求设置、回调函数等信息,所有参数都是可选的,一个简单的例子:

在实际的ajax使用中少不了提交表单数据,但表单数据是需要经过序列化的,如name=harold&password=123,这里可以使用serialize()方法/$.param()方法(仅数组或对象)

原文地址:https://www.cnblogs.com/linbudu/p/10737291.html