Jquery 无刷新提交表单并轮换页面数据

Jquery 无刷新提交表单并替换页面数据

演示地址:http://www.corange.cn/demo/3850/index.html
本例是用jquery.form.js form提交,action传递的
加了一个判断填写的项目是否填写
直接替换本页面ID
使用jquery.form.js
主要代码
<script src="../jquery.js"></script> 
<script src="jquery.form.js"></script> 
<script> 
// prepare the form when the DOM is ready 
$(document).ready(function() { 
// bind form using ajaxForm 
$('#htmlForm').ajaxForm({ 
beforeSubmit:checkForm,//提交前运行函数验证
// target identifies the element(s) to update with the server response 
target: '#htmlExampleTarget', 

// success identifies the function to invoke when the server response 
// has been received; here we apply a fade-in effect to the new content 
success: function() { 
$('#message').attr({"value":""});//内容提交后清空表单
$('#htmlExampleTarget').fadeIn('slow'); 

}); 
function checkForm(){ 
if(document.htmlForm.bigclassid.value=="")
{
alert("Please choose product item");
document.htmlForm.bigclassid.focus();
$('#htmlForm').preventDefault();//阻止表单提交 
}

}

});

</script> 
</head> 

<form id="htmlForm" action="ok.php" method="get" name="htmlForm">
<input id="bigclassid" name="bigclassid">
Message: <input type="text" name="message" value="" id="message"/> 
<input type="submit" value="ok" /> 
</form>
<div id="htmlExampleTarget">
</div> 


原文地址:http://www.corange.cn/archives/2012/08/3850.html