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;
});
});