JQ异步调用

  AjaxGet请求方式:

<script type="text/javascript">
    $.ajax({
        type: "GET",
        dataType: "html",
        url: "test.htm",
        data: {}, //参数信息,采用JS对象的形式,也可以使用URL地址比较传统的&将参数分隔
        error: function () {
            alert("获取数据失败");
        },
        beforeSend: function () {
            alert("发送请求之前出现错误");
        },
        success: function (data) {
            $("#list").html(data)
        }
    });
</script>
View Code

test.htm文档内容:

<ul>
<li>data:td</li>
<li>infomation:ok</li>
</ul>

Post请求操作数据:

 $.ajax({
        type: 'POST',
        data: { name: 'td', email: 'td@qq.com', addr: 'china' },
        url: '/ajax/insert.ashx',//一般处理程序
        success: function (data) {
            if (data.res) {
                alert('操作成功');
            }
        }
    });
View Code

注意:AJAX可以跨域发GET请求,来读取数据,但不可以发POST请求,因为这样不安全

ajax跨域Get请求:

  $.ajax({
        type: 'GET',
        dataType: 'jsonp',
        jsonp: "jsonpcallback", //需要与服务端的jsonp字符匹配
        url: 'http://www.baidu.com/ajax/test.',
        success: function (data) {
            $('#result').html(data);
        }
    });
View Code

 

简写形式:

1 远程载入html文件并插入DOM中

 $("#load").load("ajaxData.htm");

2 $.get()向指定页面发Get请求

  $.get("ajaxData.htm", function (data) {
            $("#gets").html(data);
        }, "html");

3 $.getJSON() 从指定页面获取JSON对象

    $.getJSON("json.js", function (json) {
        alert("OK");
        $("#getjsons").attr({ "src": json[0].src, "alt": json[0].alt });
    });

4 $.getScript() 装载指定js文件

 $.getScript("img.js", function () { alert("img.js装载成功!") });

5 $.post() 向指定页面发post请求

 $.post("test.ashx", { name: "John", time: "2pm" }); //普通参数
 $.post("test.ashx", $("#testform").serialize()); //表单参数(序列化表单参数,实现上把参数用&分开的)

6 序列化表单元素

$("form").serialize()

7 序列化表格元素返回 JSON 数据结构数据

console.log($("form").serializeArray());

 

posted @ 2016-06-30 10:02  那就让我这样吧  阅读(921)  评论(0编辑  收藏  举报