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

最新推荐文章于 2024-06-26 16:23:30 发布

大老费

最新推荐文章于 2024-06-26 16:23:30 发布

阅读量2.8w

点赞数 10

分类专栏： ajax请求

本文链接：https://blog.csdn.net/qq_17164811/article/details/78203766

版权

ajax请求专栏收录该内容

0 篇文章 0 订阅

订阅专栏

总结一下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
});  
//此函数会自动把选定的表单进行序列化并异步提交