jquery的get和post请求

最新推荐文章于 2025-06-26 16:48:04 发布

转载最新推荐文章于 2025-06-26 16:48:04 发布 · 511 阅读

【web前端基础知识】专栏收录该内容

54 篇文章

订阅专栏

本文介绍了三种使用Ajax进行表单提交的方式：手工填写所有表单数据、使用serialize()方法和利用jQuery Form插件的ajaxSubmit()函数。文章详细解释了每种方法的实现过程，并强调了在使用serialize()时，表单按钮的type应设为button以避免自动刷新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<!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()函数

<form>
    标题：<input type="text" name="title" /><br />
    内容：<textarea name="content"><textarea/><br />
    <button>提交</button>
</form>




$('button').on('click', function() {

    $('form').on('submit', function() {
        var title = $('inpur[name=title]').val(),
            content = $('textarea').val();

        $(this).ajaxSubmit({
            type: 'post', // 提交方式 get/post
            url: 'your url', // 需要提交的 url
            data: {
                'title': title,
                'content': content
            },
            success: function(data) { // data 保存提交后返回的数据，一般为 json 数据
                // 此处可对 data 作相关处理
                alert('提交成功！');
            }
            $(this).resetForm(); // 提交后重置表单
        });
        return false; // 阻止表单自动提交事件
    });
});

网上查找，高手在民间！