ajax

ajax

jquery ajax三种方式异步提交表单

前端liuliangsong 发表了文章 • 0 个评论 • 1327 次浏览 • 2017-09-08 13:39 • 来自相关话题

一、使用Html5 FormData对象的方式ajax异步提交数据和文件:  注意代码Jquery ajax的必须传参数processData: false,contentType: false,否则会报错:<script src="http://lib.sinaapp.com/js/jquery/1.10/jquery-1.10.0.min.js"></script>
<form class="ajax_form">
<input type="text" name="str" value="aiezu.com" />
<input type="text" name="num" value="123456" />
<input type="file" name="image" />
<button type="button" class="btn_submit">提交</button>
</form>
<script>
$(function() {
$(".btn_submit").on('click', function() {
var data = new FormData($(".ajax_form")[0]);
$.ajax({
type: 'POST',
dataType: 'json',
processData: false, // 告诉jquery不要处理数据
contentType: false, // 告诉jquery不要设置contentType
data: data,
url: '/test_form.php',
success: function(json, textStatus, xhr) {
//.....省略...
},
error: function(xhr, textStatus, errorThrown) {}
})
})
})
</script>优点:简单好用,能直接ajax异步提交数据和文件;
缺点:部分浏览器支持不够好,如IE 10一下版本不支持;
 二、使用jquery serialize()函数构建数据或者手动构建数据对象方式:  本方式建议在只异步提交基本数据,不需要异步上传文件的情况下使用:<script src="http://lib.sinaapp.com/js/jquery/1.10/jquery-1.10.0.min.js"></script>
<form class="ajax_form">
<input type="text" name="str" value="aiezu.com" />
<input type="text" name="num" value="123456" />
<input type="file" name="image" />
<button type="button" class="btn_submit">提交</button>
</form>
<script>
$(function() {
$(".btn_submit").on('click', function() {
var data = $(".ajax_form").serialize(); // str=aiezu.com&num=123456
//或者
var data = {str:$('[name="str"]').val(), num:$('[name="num"]').val()};
$.ajax({
type: 'POST',
dataType: 'json',
data: data,
url: '/test_form.php',
success: function(json, textStatus, xhr) {
//.....省略...
},
error: function(xhr, textStatus, errorThrown) {}
})
})
})
</script>优点:简单好用,几乎兼容所有浏览器;
缺点:无法ajax异步上传文件,只能异步提交基本数据;
 
三、使用jquery from插件来ajax异步提交数据和文件:<script src="http://lib.sinaapp.com/js/jquery/1.10/jquery-1.10.0.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>
<form class="ajax_form">
<input type="text" name="str" value="aiezu.com" />
<input type="text" name="num" value="123456" />
<input type="file" name="image" />
<button type="button" class="btn_submit">提交</button>
</form>
<script>
$(function() {
$(".btn_submit").on('click', function() {
var params = {
type: 'POST',
dataType: 'text',
url: '/test_form.php',
success: function(text, textStatus, xhr) {
var json = eval(json);
},
error: function(xhr, textStatus, errorThrown) {
}
}

$(".ajax_form").ajaxSubmit(params);
})
})
</script>优点:自动判断浏览器是否支持html5 FormData,支持直接使用FormData提交,不支持时会使用iframe方式伪装ajax 异步提交;
缺点:IE低版本响应类型只能是html、xml,否则会提示下载文件。 查看全部

一、使用Html5 FormData对象的方式ajax异步提交数据和文件:

  注意代码Jquery ajax的必须传参数processData: falsecontentType: false,否则会报错:
<script src="http://lib.sinaapp.com/js/jquery/1.10/jquery-1.10.0.min.js"></script>
<form class="ajax_form">
<input type="text" name="str" value="aiezu.com" />
<input type="text" name="num" value="123456" />
<input type="file" name="image" />
<button type="button" class="btn_submit">提交</button>
</form>
<script>
$(function() {
$(".btn_submit").on('click', function() {
var data = new FormData($(".ajax_form")[0]);
$.ajax({
type: 'POST',
dataType: 'json',
processData: false, // 告诉jquery不要处理数据
contentType: false, // 告诉jquery不要设置contentType
data: data,
url: '/test_form.php',
success: function(json, textStatus, xhr) {
//.....省略...
},
error: function(xhr, textStatus, errorThrown) {}
})
})
})
</script>
优点:简单好用,能直接ajax异步提交数据和文件;
缺点:部分浏览器支持不够好,如IE 10一下版本不支持;
 

二、使用jquery serialize()函数构建数据或者手动构建数据对象方式:

  本方式建议在只异步提交基本数据,不需要异步上传文件的情况下使用:
<script src="http://lib.sinaapp.com/js/jquery/1.10/jquery-1.10.0.min.js"></script>
<form class="ajax_form">
<input type="text" name="str" value="aiezu.com" />
<input type="text" name="num" value="123456" />
<input type="file" name="image" />
<button type="button" class="btn_submit">提交</button>
</form>
<script>
$(function() {
$(".btn_submit").on('click', function() {
var data = $(".ajax_form").serialize(); // str=aiezu.com&num=123456
//或者
var data = {str:$('[name="str"]').val(), num:$('[name="num"]').val()};
$.ajax({
type: 'POST',
dataType: 'json',
data: data,
url: '/test_form.php',
success: function(json, textStatus, xhr) {
//.....省略...
},
error: function(xhr, textStatus, errorThrown) {}
})
})
})
</script>
优点:简单好用,几乎兼容所有浏览器;
缺点:无法ajax异步上传文件,只能异步提交基本数据;
 
三、使用jquery from插件来ajax异步提交数据和文件:
<script src="http://lib.sinaapp.com/js/jquery/1.10/jquery-1.10.0.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>
<form class="ajax_form">
<input type="text" name="str" value="aiezu.com" />
<input type="text" name="num" value="123456" />
<input type="file" name="image" />
<button type="button" class="btn_submit">提交</button>
</form>
<script>
$(function() {
$(".btn_submit").on('click', function() {
var params = {
type: 'POST',
dataType: 'text',
url: '/test_form.php',
success: function(text, textStatus, xhr) {
var json = eval(json);
},
error: function(xhr, textStatus, errorThrown) {
}
}

$(".ajax_form").ajaxSubmit(params);
})
})
</script>
优点:自动判断浏览器是否支持html5 FormData,支持直接使用FormData提交,不支持时会使用iframe方式伪装ajax 异步提交;
缺点:IE低版本响应类型只能是html、xml,否则会提示下载文件。

jquery ajax三种方式异步提交表单

前端liuliangsong 发表了文章 • 0 个评论 • 1327 次浏览 • 2017-09-08 13:39 • 来自相关话题

一、使用Html5 FormData对象的方式ajax异步提交数据和文件:  注意代码Jquery ajax的必须传参数processData: false,contentType: false,否则会报错:<script src="http://lib.sinaapp.com/js/jquery/1.10/jquery-1.10.0.min.js"></script>
<form class="ajax_form">
<input type="text" name="str" value="aiezu.com" />
<input type="text" name="num" value="123456" />
<input type="file" name="image" />
<button type="button" class="btn_submit">提交</button>
</form>
<script>
$(function() {
$(".btn_submit").on('click', function() {
var data = new FormData($(".ajax_form")[0]);
$.ajax({
type: 'POST',
dataType: 'json',
processData: false, // 告诉jquery不要处理数据
contentType: false, // 告诉jquery不要设置contentType
data: data,
url: '/test_form.php',
success: function(json, textStatus, xhr) {
//.....省略...
},
error: function(xhr, textStatus, errorThrown) {}
})
})
})
</script>优点:简单好用,能直接ajax异步提交数据和文件;
缺点:部分浏览器支持不够好,如IE 10一下版本不支持;
 二、使用jquery serialize()函数构建数据或者手动构建数据对象方式:  本方式建议在只异步提交基本数据,不需要异步上传文件的情况下使用:<script src="http://lib.sinaapp.com/js/jquery/1.10/jquery-1.10.0.min.js"></script>
<form class="ajax_form">
<input type="text" name="str" value="aiezu.com" />
<input type="text" name="num" value="123456" />
<input type="file" name="image" />
<button type="button" class="btn_submit">提交</button>
</form>
<script>
$(function() {
$(".btn_submit").on('click', function() {
var data = $(".ajax_form").serialize(); // str=aiezu.com&num=123456
//或者
var data = {str:$('[name="str"]').val(), num:$('[name="num"]').val()};
$.ajax({
type: 'POST',
dataType: 'json',
data: data,
url: '/test_form.php',
success: function(json, textStatus, xhr) {
//.....省略...
},
error: function(xhr, textStatus, errorThrown) {}
})
})
})
</script>优点:简单好用,几乎兼容所有浏览器;
缺点:无法ajax异步上传文件,只能异步提交基本数据;
 
三、使用jquery from插件来ajax异步提交数据和文件:<script src="http://lib.sinaapp.com/js/jquery/1.10/jquery-1.10.0.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>
<form class="ajax_form">
<input type="text" name="str" value="aiezu.com" />
<input type="text" name="num" value="123456" />
<input type="file" name="image" />
<button type="button" class="btn_submit">提交</button>
</form>
<script>
$(function() {
$(".btn_submit").on('click', function() {
var params = {
type: 'POST',
dataType: 'text',
url: '/test_form.php',
success: function(text, textStatus, xhr) {
var json = eval(json);
},
error: function(xhr, textStatus, errorThrown) {
}
}

$(".ajax_form").ajaxSubmit(params);
})
})
</script>优点:自动判断浏览器是否支持html5 FormData,支持直接使用FormData提交,不支持时会使用iframe方式伪装ajax 异步提交;
缺点:IE低版本响应类型只能是html、xml,否则会提示下载文件。 查看全部

一、使用Html5 FormData对象的方式ajax异步提交数据和文件:

  注意代码Jquery ajax的必须传参数processData: falsecontentType: false,否则会报错:
<script src="http://lib.sinaapp.com/js/jquery/1.10/jquery-1.10.0.min.js"></script>
<form class="ajax_form">
<input type="text" name="str" value="aiezu.com" />
<input type="text" name="num" value="123456" />
<input type="file" name="image" />
<button type="button" class="btn_submit">提交</button>
</form>
<script>
$(function() {
$(".btn_submit").on('click', function() {
var data = new FormData($(".ajax_form")[0]);
$.ajax({
type: 'POST',
dataType: 'json',
processData: false, // 告诉jquery不要处理数据
contentType: false, // 告诉jquery不要设置contentType
data: data,
url: '/test_form.php',
success: function(json, textStatus, xhr) {
//.....省略...
},
error: function(xhr, textStatus, errorThrown) {}
})
})
})
</script>
优点:简单好用,能直接ajax异步提交数据和文件;
缺点:部分浏览器支持不够好,如IE 10一下版本不支持;
 

二、使用jquery serialize()函数构建数据或者手动构建数据对象方式:

  本方式建议在只异步提交基本数据,不需要异步上传文件的情况下使用:
<script src="http://lib.sinaapp.com/js/jquery/1.10/jquery-1.10.0.min.js"></script>
<form class="ajax_form">
<input type="text" name="str" value="aiezu.com" />
<input type="text" name="num" value="123456" />
<input type="file" name="image" />
<button type="button" class="btn_submit">提交</button>
</form>
<script>
$(function() {
$(".btn_submit").on('click', function() {
var data = $(".ajax_form").serialize(); // str=aiezu.com&num=123456
//或者
var data = {str:$('[name="str"]').val(), num:$('[name="num"]').val()};
$.ajax({
type: 'POST',
dataType: 'json',
data: data,
url: '/test_form.php',
success: function(json, textStatus, xhr) {
//.....省略...
},
error: function(xhr, textStatus, errorThrown) {}
})
})
})
</script>
优点:简单好用,几乎兼容所有浏览器;
缺点:无法ajax异步上传文件,只能异步提交基本数据;
 
三、使用jquery from插件来ajax异步提交数据和文件:
<script src="http://lib.sinaapp.com/js/jquery/1.10/jquery-1.10.0.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>
<form class="ajax_form">
<input type="text" name="str" value="aiezu.com" />
<input type="text" name="num" value="123456" />
<input type="file" name="image" />
<button type="button" class="btn_submit">提交</button>
</form>
<script>
$(function() {
$(".btn_submit").on('click', function() {
var params = {
type: 'POST',
dataType: 'text',
url: '/test_form.php',
success: function(text, textStatus, xhr) {
var json = eval(json);
},
error: function(xhr, textStatus, errorThrown) {
}
}

$(".ajax_form").ajaxSubmit(params);
})
})
</script>
优点:自动判断浏览器是否支持html5 FormData,支持直接使用FormData提交,不支持时会使用iframe方式伪装ajax 异步提交;
缺点:IE低版本响应类型只能是html、xml,否则会提示下载文件。