参考 http://www.cnblogs.com/popzhou/p/4338040.html
- 依赖的脚本文件
1 <script src="../Javascript/jquery-1.11.1.min.js" type="text/javascript"></script> 2 <script src="../Javascript/jquery.form.js" type="text/javascript"></script>
- AjaxSubmit 和AjaxForm区别
ajaxFormajaxForm()不能提交表单。在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始ajaxForm()适用于以表单提交方式处理ajax技术(需要提供表单的action、id、 method,最好在表单中提供submit按钮)它大大简化了使用ajax技术提交表单时的数据传递问题,使用ajaxForm()你不需要逐个的以 JavaScript的方式获取每个表单属性的值,并且也不需要在请求路径后面通过url重写的方式传递数据。ajaxForm()会自动收集当前表单中每个属性的值,然后将其以表单提交的方式提交到目标url。这种方式提交数据较安全,并且使用起来更简单,不必写过多冗余的JavaScript代码ajaxSubmit
ajaxSubmit()马上由AJAX来提交表单。你可以在任何情况下进行该项提交。ajaxSubmit()适用于以事件的机制以ajax提交form表单(超链接、图片的click事件),该方法作用与ajaxForm()类似,但它更为灵活,因为他依赖于事件机制,只要有事件存在就能使用该方法。你只需指定该form的action属性即可,不需要提供submit按钮。
- 示例代码
123456789101112131415161718192021222324252627282930313233343536373839404142
<!--HTML-->
<form id=
"form1"
name=
"form1"
>
<input id=
"userName"
name=
"userName"
value=
"姓名"
/>
<input id=
"age"
name=
"age"
value=
"30"
/>
<input type=
"submit"
value=
"submit"
/>
</form>
<input id=
"myButton"
type=
"button"
value=
"提交"
/>
<!--javascript-->
<script type=
"text/javascript"
>
var
myData = {
"CnName"
:
"周佳良"
,
"EnName"
:
"zhoujl"
};
$(
function
() {
var
ajaxFormOption = {
type:
"post"
,
//提交方式
dataType:
"json"
,
//数据类型
data: myData,
//自定义数据参数,视情况添加
url:
"TestHandler.ashx?type=ajaxForm"
,
//请求url
success:
function
(data) {
//提交成功的回调函数
document.write(
"success"
);
}
};
//form中有submit按钮——方式1
$(
"#form1"
).ajaxForm(ajaxFormOption);
//form中有submit按钮——方式2
$(
"#form1"
).submit(
function
() {
$(
this
).ajaxSubmit(ajaxFormOption);
return
false
;
});
//不需要submit按钮,可以是任何元素的click事件
$(
"#myButton"
).click(
function
() {
$(
"#form1"
).ajaxSubmit(ajaxFormOption);
return
false
;
});
});
</script>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构