dedecms不跳转(ajax)提交自定义表单的方法【简单粗暴】

2018-02-11 二次开发 浏览 手机预览
文章来源:http://www.dedecmsok.com/html/n184.html

在做项目的过程中遇到要将form表单提交转为ajax方式提交,下面是我总结的如何把form表单提交无缝转为ajax方式提交的方法。

  1. 将form元素的属性action、enctype、method去掉,添加id="form",form元素就变为<form id="form">

  2. 引入jquery库,<script src="jquery-1.8.2.min.js"></script>
    引入 jquery-1.8.2.min.js,右键选择“另存为”

  3. 提交按钮增加 onclick="add_ajax()" 并把 type="submit" 修改为 type="button"
    例如:<input type="button" value="提 交" onclick="add_ajax()" />

  4. 把ajax代码放在页面最底部(不能放在jquery库之前)

<script type="text/javascript">
function add_ajax(){
    $.ajax({
        type: "POST",
        url: "/plus/diy.php",//提交到后台文件
        data: $("#form").serialize(),//表单传值
        success: function(data) {
            alert(data);//弹窗显示PHP返回的值
            $("#deok").html(data);//以html的形式显示在指定id的元素里
            $("#form")[0].reset();//提交后清除表单填写的值
            $(this).val("");//清空上次input框里的数据
            $("#deok").val(aaa["boxnum"]);//向input框里写入新数据
        }
    });
    return false;
}
</script>


延伸阅读:
当表单的属性设置为"disabled"时,提交表单时,select的值无法传递,需要提交前移除disabled属性,使用$("#role").removeAttr("disabled");即可(提交前移除id="role"的disabled属性

readonly属性和disabled的作用是一样的,他们之间有着细小的差别,readonly属性在提交时是可以传值的,而disabled则不能传值。

原文地址:http://www.dedecmsok.com/html/n184.html
  • 如果你的问题还没有解决,可以点击页面右侧的“ ”,站长收到问题后会尽快回复解决方案到你的邮箱。
  • 创造始于问题,有了问题才会思考,有了思考,才有解决问题的方法,才有找到独立思路的可能。 —— 陶行知