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>";
?>

转载于:https://www.cnblogs.com/linjing-blog/p/6757658.html

form插件的核心方法--ajaxForm(),ajaxSubmit()相关推荐

jQuery form插件的使用--ajaxForm()和ajaxSubmit()的可选参数项对象
jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax. jQuery Form有两个核心方法 – ajaxForm ...
jQuery form插件的使用
jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax. jQuery Form有两个核心方法 – ajaxFor ...
jQuery form插件之ajaxForm()和ajaxSubmit()
代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> < ...
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
原文:http://www.jb51.net/article/78536.htm Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署 ...
query插件之ajaxForm ajaxSubmit的理解用法
如今ajax满天飞,作为重点的form自然也受到照顾. 其实,我们在平常使用Jquery异步提交表单,一般是在submit()中,使用$.ajax进行.比如: $(function(){$('#myF ...
Jquery插件之ajaxForm ajaxSubmit的理解用法
如今ajax满天飞,作为重点的form自然也受到照顾. 其实,我们在平常使用Jquery异步提交表单,一般是在submit()中,使用$.ajax进行.比如: $(function(){$('#myF ...
【转】4.2使用jQuery.form插件，实现完美的表单异步提交
传送门:异步编程系列目录-- 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 抓住6月份的尾巴,今天的主题是今天我想介绍的是一款jQuery的插件:Jquery.form. ...
form参数化 jq_[转载]Jquery Form插件表单参数
表单插件API提供了几个方法,让你轻松管理表单数据和进行表单提交. ajaxForm 增加所有需要的事件监听器,为AJAX提交表单做好准备.ajaxForm不能提交表单.在document的read ...
jQuery form插件使用详解
点击打开: jquery选择器全解 jquery中的style样式操作 jquery中的DOM操作 jquery中的事件操作全解 jquery中的动画操作全解 jquery中ajax的应用自定义jq ...

form插件的核心方法--ajaxForm(),ajaxSubmit()

form插件的核心方法--ajaxForm(),ajaxSubmit()相关推荐

最新文章

热门文章