提交Ajax表单数据的几种方式

07-06 14:15 663浏览

举报 T字号

大字

中字

小字

总结一下Ajax提交表单数据的几种方式

第一种方式：手工填写所有表单数据

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <script type="text/javascript">
        $(function(){

            $.ajax({
                url:'xxxx',
                type:'post',
                dataType:'json',
                data:{
                    'p1':$('#p1'),
                    'p2':$('#p2')
                },
                success:function(result){
                    //回调函数
                }
            });
        });
    </script>
</head>
<body>
    <form id="myForm" action="">
        <input id="p1" name="p1" value="p1"/>
        <input id="p2" name="p2" value="p2"/>
        <input id="btn" type="button" value="提交"/>
    </form>
</body>
</html>

第二种方式：$(‘#myform’).serialize( );

注意：这时表单的按钮的type不可以是submit，否则自提交数据，也就是自动刷新;

当时做的一个功能是: 在数据列表的第二页点击一条数据修改，修改成功后，显示修改成功，页面还要停留在第二页，不能回到第一页，所以就不能刷新网页，不然就回到第一页了;而用Ajax的serialize()提交表单，如果input的type为submit，提交时就会自动刷新，回到第一页，所以，用serialize()提交表单的时候最好把type改为button

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <script type="text/javascript">
        $(function(){
            $.ajax({
                url:'xxxx',
                type:'post',
                dataType:'json',
                data:$("#myForm").serialize(),
                success:function(result){
                    //回调函数 
                }
            });
        });
    </script>
</head>
<body>
    <form id="myForm" action="">
        <input id="p1" name="p1" value="p1"/>
        <input id="p2" name="p2" value="p2"/>
        <input id="btn" type="button" value="提交"/>
    </form>
</body>
</html>

第三种方式：使用jQuery Form插件提供的ajaxSubmit()函数

没怎么使用过，找了一下代码，需要引用一下js文件

$('#myform').ajaxSubmit({
type: 'GET/POST',
url: 'xx.php',
dataType: 'json',
success: fn,
clearForm: true,
resetForm: true
});  
//此函数会自动把选定的表单进行序列化并异步提交

动力节点在线课程涵盖零基础入门，高级进阶，在职提升三大主力内容，覆盖Java从入门到就业提升的全体系学习内容。全部Java视频教程免费观看，相关学习资料免费下载!对于火爆技术，每周一定时更新!如果想了解更多相关技术，可以到动力节点在线免费观看Ajax视频教程学习哦!

0人推荐

共同学习，写下你的评论

0条评论

代码小兵345

44篇文章贡献168626字

提交Ajax表单数据的几种方式

相关课程更多>

作者相关文章更多>

推荐相关文章更多>

发评论

举报

提交Ajax表单数据的几种方式

相关课程 更多>

作者相关文章更多>

推荐相关文章更多>

发评论

举报

相关课程更多>