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>
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('操作成功'); } } });
注意: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); } });
简写形式:
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());