jquery.form.js 让表单提交更优雅。可以页面不刷新提交表单,比jQuery的ajax提交要功能强大。
1.引入
<script src="/src/jquery-1.9.1.min.js"></script><script type="text/javascript" src="/src/jquery.form.js"></script>
2.使用
$(function () { ???????var E = window.wangEditor; ???????var content_editor = new E(‘#content_editor‘); ???????content_editor.create(); ???????var content_val = $("#content").val(); ???????// 设置内容 ???????content_editor.txt.html(content_val); ???????var answer_editor = new E(‘#answer_editor‘); ???????answer_editor.create(); ???????var answer_val = $("#answer").val(); ???????// 设置内容 ???????answer_editor.txt.html(answer_val); ???????$("#cancel_btn").on(‘click‘,function () { ???????????window.location.href = ‘index‘; ???????}); ???????// 只是准备工作,需要表单提交才触发 ???????$("#edit_form").ajaxForm({ ???????????dataType: "json", ???????????success : function(res){ ???????????????if(res.errno == 0){ ???????????????????alert(‘已保存‘); ???????????????????window.location.href = ‘index‘; ???????????????}else{ ???????????????????alert(res.errdesc); ???????????????} ???????????????return false; ???????????} ???????}); ???????// 提交按钮点击 ???????$("#edit_btn").on("click", function(){ ???????????// 获取并判断各个值是否填写并正确 ???????????var id ??= $("#id").val(); ???????????var title =$("#title").val(); ???????????// 获取内容 ???????????var content = content_editor.txt.html(); ???????????var answer = answer_editor.txt.html(); ???????????var question_type_id = $("#question_type_id").val(); ???????????if(!title){ ???????????????alert(‘标题不能为空‘); ???????????????return; ???????????} ???????????if (!content && !answer) { ???????????????alert(‘内容和答案不能全为空‘); ???????????????return; ???????????} ???????????if(!question_type_id){ ???????????????alert(‘类型不能为空‘); ???????????????return; ???????????} ???????????// 设置新内容 ???????????$(‘#content‘).val(content); ???????????$(‘#answer‘).val(answer); ???????????// 表单触发submit事件 ???????????$("#edit_form").submit(); ???????????return false; ???????});});