关于jQuery.form 的表单提交

一个<form>表单，一个submit按钮，昨天一个博客说到，那个submit按钮在<form>里面和外面结果编译出来的source都是以在里面，然后放在外面的话，就能够用ajax提交，其实还是因为自己写的代码不规范。今天在IE上运行，提交表单时，按钮按下，变成了下载那个action了。但是chrome和Maxthon里就不会，再次仔细的研究了一下代码。

这次没有直接用easyui的form提交，而是下载了jquery.form.js的插件。一开始在button的click时间里，通过$('#commentForm').ajaxForm(options);提交表单，怎么都执行不通过。甚至把form都改成div了。还是不行。

然后放弃，直接用原来最原始的方法，直接用$.ajax()来提交，竟然通过了。后来仔细看jquery.form.js的sample。看到人家是在$().ready的时候先把提交表单和<form>做一个绑定的。因为我没有用到submit按钮，然后也跟着先在$().ready里先绑定。然后在button的click事件里直接$('#commentForm').submit();也通过了。

分析下来，原来一直把.ajaxForm作为像是.ajax一样的提交一个ajax动作的方式去写代码了。

 

$().ready(function() {

// validate signup form on keyup and submit

$('#buttonOK').linkbutton( {

plain : false

});

 

var options = {

success : showResponse, // post-submit callback

// other available options:

url : 'LoginValidate.action', // override for form's 'action'

// attribute

type : 'post', // 'get' or 'post', override for form's 'method'

// attribute

dataType : 'json', // 'xml', 'script', or 'json' (expected server

// response type)

data : $("#commentForm").serialize()

// clearForm: true // clear all form fields after successful submit

// resetForm: true // reset the form after successful submit

 

// $.ajax options can be used here too, for example:

// timeout: 3000

};

 

// bind form using 'ajaxForm'

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

 

$("#buttonOK").click(function() {

$("#commentForm").submit();

// var options = {

// success: showResponse, // post-submit callback

// // other available options:

// url:'LoginValidate.action', // override for form's 'action'

// attribute

// type:'post', // 'get' or 'post', override for form's 'method'

// attribute

// dataType: 'json', // 'xml', 'script', or 'json' (expected

// server response type)

// data: $("#commentForm").serialize()

// //clearForm: true // clear all form fields after successful

// submit

// //resetForm: true // reset the form after successful submit

//     

// // $.ajax options can be used here too, for example:

// //timeout: 3000

// };

//    

// $.ajax(options);

 

// call 'submit' method of form plugin to submit the form

// $('#commentForm').form('submit', {

// url:"LoginValidate.action",

//

// success:function(data){

// //alert(data);

// showResponse(data);

// }

// });

});

});