form插件的核心方法--ajaxForm(),ajaxSubmit()
方法1:
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>核心方法--ajaxForm()和ajaxSubmit()</title>
</head>
<body>
<form id="myForm1" action="xml.php" method="post">
名称: <input type="text" name="username"/></br>
地址: <input type="text" name="address"/></br>
自我介绍: <textarea name="comment"></textarea></br>
<input type="submit" value="提交" id="test" /></br>
<div id="output1" style="display: none;"></div>
</form>
<script type="text/javascript" src="../scripts/jquery-1.3.1.js"></script>
<script type="text/javascript" src="../scripts/lib/jquery.form.js"></script>
<script type="text/javascript">
$("#myForm1").ajaxForm({
dataType: 'xml',
beforeSubmit: showRequest,
error : errorXML,
success: processXML
});
function errorXML(){
alert("error message");
}
//提交前的回调函数
/*fieldValue()方法会把匹配元素的值插入到数组中，然后返回这个数组。如果表单元素的值被判定无效，则为空数组，否则数组包含一个或多个元素值。
*/
function showRequest(formData,jqForm,options){
var username=$("input[name=username]").fieldValue();
var address=$("input[name=address]").fieldValue();
if(!username[0] || !address[0]){
alert("用户名和地址不能为空！！");
return false;
}
var queryString=$.param(formData);
return true;
}
// 提交成功的回调函数
function processXML(responseXML){
var username=$('username',responseXML).text();
var address=$('address',responseXML).text();
var comment=$('comment',responseXML).text();
$("#output1").html(username+' '+address+' '+comment).show();
}
</script>
</body>
</html>
被加载的xml.php文件
<?php
header("Content-Type:text/xml;charset=utf-8");
echo "<?xml version='1.0' encoding='utf-8'?>".
"<root>".
"<username>{$_POST['username']}</username>".
"<address>{$_POST['address']}</address>".
"<comment>{$_POST['comment']}</comment>".
"</root>";
?>
--------------------------------------------------------------------------------------------------------
方法2：
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>核心方法--ajaxForm()和ajaxSubmit()</title>
</head>
<body>
<form id="myForm2" action="json.php" method="post">
名称: <input type="text" name="username"/></br>
地址: <input type="text" name="address"/></br>
自我介绍: <textarea name="comment"></textarea></br>
<input type="submit" value="提交" id="test" /></br>
<div id="jsonOut" ></div>
</form>
<script type="text/javascript" src="../scripts/jquery-1.3.1.js"></script>
<script type="text/javascript" src="../scripts/lib/jquery.form.js"></script>
<script type="text/javascript">
$("#myForm2").ajaxForm({
dataType: 'json',
beforeSubmit: validate ,
success: processJson
});
//提交前的回调函数
function validate (formData,jqForm,options){
// alert(formData);
for(var i=0;i<formData.length;i++){
if(!formData[i].value){
alert("用户名，地址和自我介绍不能为空！");
return false;
}
}
var queryString=$.param(formData);
return true;
}
//提交成功的回调函数
function processJson(data){
var htmlText="<div><h4>"+data['username']+"</h4><span>"+data['address']+"</span><p>"+data['comment']+"</p></div>";
$("#jsonOut").html(htmlText);
}
</script>
</body>
</html>
被加载的json.php文件,代码如下
<?php
header("Content-Type:text/html;charset=utf-8");
echo "{'username':'{$_POST['username']}','address':'{$_POST['address']}','comment':'{$_POST['comment']}'}";
?>
-------------------------------------------------------------------------------------------
方法3：
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>核心方法--ajaxForm()和ajaxSubmit()</title>
</head>
<body>
<form id="myForm3" action="ajax.php" method="post">
名称: <input type="text" name="username"/></br>
地址: <input type="text" name="address"/></br>
自我介绍: <textarea name="comment"></textarea></br>
<input type="submit" value="提交" id="test" /></br>
<div id="htmlOut" ></div>
</form>
<script type="text/javascript" src="../scripts/jquery-1.3.1.js"></script>
<script type="text/javascript" src="../scripts/lib/jquery.form.js"></script>
<script type="text/javascript">
$("#myForm3").ajaxForm({
dataType: 'xml',
beforeSubmit: validate ,
success: processXML
});
//提交前的回调函数
function validate (formData,jqForm,options){
var form=jqForm[0];
// alert(queryString);
if(!form.username.value || !form.address.value){
alert("用户名，地址和自我介绍不能为空！");
return false;
}
var queryString=$.param(formData);
return true;
}
//提交成功的回调函数
$("#myForm3").ajaxForm({
target: '#htmlOut',
success: function(){
$("#htmlOut").fadeIn('show');
}
});
</script>
</body>
</html>
加载的ajax.php代码如下
<?php
header("Content-Type:text/html;charset=ft-8");
echo "<h3>".$_POST['username']." ".$_POST['address']." ".$_POST['comment']."</h3>";
?>
