jQuery调用Ajax异步传输
通过Jqery使用Ajax异步传输的方法
现在的前端技术经常会用到Ajax来做异步传输数据，Ajax是什么？简短地说，就是在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。而使用jQuery来写Ajax非常的方便，可以通过load（）方法实现，也可以通过get或者post来实现。
先说load:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("/statics/demosource/dem2o_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改该文本</h2></div>
<button>获取外部内容</button>
</body>
</html>load(url,data,callback) url是响应的地址，data是附加传送的值，callback是回调函数
$.get():
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("/statics/demosource/demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
});
</script>get方法的参数和load是一样的
$.post():
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("/statics/demosource/demo_test_post.php",
{
name:"Jack",
url:"http://www.huangl.top"
},
function(data,status){
alert("数据: " + data + "状态: " + status);
});
});
});
</script>参数同上
get和post的使用都差不多，但是两者还是有些区别的，区别就在于：
GET 是从指定的资源请求数据
POST 是向指定的资源提交要处理的数据
也就是说get多用于单纯的获取数据，当然get也可以传值，post多用于传输数据并返回结果
当然还有一种方法用于异步传输数据：
<script type="text/javascript" charset="UTF-8">
$('#froms').submit(function() {
var mob = $("input[name='phonen']").val(),
mianj=$("input[name='oarea']").val(),
fengge=$("#fengge").val(),
ip=returnCitySN['cname'],
secshi=$("#secshi").val(),
secting=$("#secting").val(),
secchu=$("#secchu").val(),
secyangtai=$("#secyangtai").val(),
hux=secshi+"室"+secting+"卫"+secchu+"厨",
url = window.location.href;
if(mianj.length==0||mianj.length>3){
alert('请输入正确住房面积');
return false;
}
if(mob.length!=11||mob.substr(0,1)!=1){
alert('请输入手机号');
return false;
}
$(this).ajaxSubmit({
type: 'post', // 提交方式 get/post
url: 'http://zxc.9116hai.com/myzj/myzj/public/index.php/index/index/lists', // 需要提交的 url
data: {
'url': url,
'mobile':mob,
'mianji':mianj,
'ip':ip,
'huxin':hux,
},
scriptCharset: 'utf-8',
error: function(request) {
alert('报价成功。稍后将会通过短信发送到您的手机。');
},
success: function(data) { // data 保存提交后返回的数据，一般为 json 数据
// 此处可对 data 作相关处理
alert('报价成功。稍后将会通过短信发送到您的手机。');
}
});
$(this).resetForm(); // 提交后重置表单
return false; // 阻止表单自动提交事件
});
</script>使用这个方法来处理表单提交数据就再也不用担心提交表单后页面会跳转了
