首页 > 上网技巧 > 电脑小技巧 > ajax实现提交表单页面不跳转的方法

ajax实现提交表单页面不跳转的方法

时间:2019-06-26 11:11 作者:QQ地带 我要评论

将form元素的属性action、enctype、method去掉,添加id="form",form元素就变为<form id="form">
 
引入jquery库,点击【这里】下载
 
提交按钮增加 onclick="add_ajax()" 并把 type="submit" 修改为 type="button" 
例如:<input type="button" value="提 交" onclick="add_ajax()" />
 
把ajax代码放在页面最底部(不能放在jquery库之前)
 
<script type="text/javascript">
function add_ajax(){
    $.ajax({
        type: "POST",
        url: "/plus/diy.php",//提交到后台文件
        data: $('#form').serialize(),//表单传值
        success: function(data) {        
            //弹窗显示PHP返回的值
            alert(data);            
            //以html的形式显示在指定id的元素里
            $("#deok").html(data);            
            //提交后清除表单填写的值
            $('#form')[0].reset();            
            //往input框里传值
            $(this).val("");//清空上次input框里的数据
            $("#deok").val(aaa["boxnum"]);//向input框里写入新数据
        }
    });
    return false;
}
</script>
 
 
延伸阅读:
当表单的属性设置为"disabled"时,提交表单时,select的值无法传递,需要提交前移除disabled属性,使用$("#role").removeAttr("disabled");即可(提交前移除id="role"的disabled属性)

标签: ajax
顶一下
(1)
100%
踩一下
(0)
0%

Google提供的广告