當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2024/8/26 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 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()的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

编程问答

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

總結