form表单ajax提交 ac,Ckeditor+Jquery.Form插件ajax不提交最新数据问题的解决

昨晚发现，用Ckeditor+Jquery.Form插件做的ajax提交保存文章内容，不是最新编辑的内容。分步骤对各个阶段提交的数据进行了分析、解决问题。过程是痛苦的，经验是值得总结的。下面一次列出遇到的各个问题，以及解决的方法。

1.使用ajaxSubmit代替ajaxForm

问题：

之前我使用了ajaxForm在页面载入完毕时，对页面中的form(表单)进行了插件的接管，这样每次ajax提交的过程就完全自动的被插件接管，就无法在提交的过程中再加入一些操作。这里的操作指的是在提交动作之前，和插件中的

beforeSubmit 配置是不同的。代码：

1

$('#blog_edit_frm').ajaxForm({

2

beforeSubmit:

blog_save_start,

3

success:

blog_save_success

4

});

解决：

解决起来很简单，使用ajaxSubmit代替ajaxForm就可以了，从下面的带代码中，我们可以看到可以在ajaxSubmit之前加入各种需要的操作。

1

$('#blog_edit_frm').submit(function(){

2

// 加入需要的操作代码

3

$('#blog_edit_frm').ajaxSubmit({

4

beforeSubmit:

blog_save_start,

5

success:

blog_save_success

6

});

7

return false;

8

});

2.ckeditor数据向content(页面用以替换的编辑框)的同步

问题：

我们发现，在数据通过ajaxSubmit提交的过程中，并不能将最新的数据进行提交。换句话说，最新的数据无法被jquery.form插件获取到。

解决：

在ajaxSubmit之前，将ckeditor的编辑内容，强制放入content(页面areatext)中。如下修改代码：

1

$('#blog_edit_frm').submit(function(){

2

$('#content').val(CKEDITOR.instances.content.getData());

3

$('#blog_edit_frm').ajaxSubmit({

4

beforeSubmit:

blog_save_start,

5

success:

blog_save_success

6

});

7

return false;

8

});

3.ajaxSubmit提交的地址的动态生成(防止浏览器缓存)

问题：

到此为止，我们可以将新数据随时提交，但是仍然会出现，服务器端不保存最新数据的问题。

解决：

推测问题出在，提交url的时候，浏览器按照地址，对数据进行了缓存的问题。如下修改代码，以便于动态的生成不同的url，实际效果相同。

1

$('#blog_edit_frm').submit(function(){

2

$('#content').val(CKEDITOR.instances.content.getData());

3

$('#blog_edit_frm').ajaxSubmit({

4

url:

"url" +

(new Date()).getTime(),

5

beforeSubmit:

blog_save_start,

6

success:

blog_save_success

7

});

8

return false;

9

});

代码的生成方式，请根据具体系统的情况进行修改。原则是在链接尾部，加上无意义的时间戳(javascript)。

----------------------------------------------------

在ckeditor官网上看到的相关内容，同样是上述提到的问题，不过说到的办法似乎不能用。

摘录了一部分，如下：

Submitted by Fawad on Thu, 2010-12-09

21:33.

Hi,

I was trying to use ckeditor with official jQuery Form Plugin for AJAX

based forms but with the first submit I dont get the data. If I

submit it for the second time only then it works. Any suggestions

on this?

Submitted by Fawad on Sun, 2010-12-12

18:47.

Heye guys,

I found a solution for using ckeditor with JQuery ajaxForm plugin.

Instead of doing the following

$(document).ready(function() {

$('#myForm').ajaxForm(options);

});

do the following

function submitAjaxForm(){

$('#myForm').ajaxForm(options);

}

and onsubmit of the form call this function.

Hope it helps someone.