Jquery ajax提交表单几种方法
在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法。
$get方式提交表单
get() 方法通过远程 HTTP GET 请求载入信息
格式
$(selector).get(url,data,success(response,status,xhr),dataType)
请求 test.php 网页,传送2个参数,忽略返回值:
$.get("test.php", { name: "John", time: "2pm" } );
显示 test.php 返回值(HTML 或 XML,取决于返回值):
代码如下:
$.get("test.php", function(data){
alert("Data Loaded: " + data);
});
ajax 序列化表单
$.Form.serialize( NameValuePair )
虚拟一个表单,并设置表单控件名与值。
参数
NameValuePair
必选项。设置虚拟的表单控件。该参数形式为:{ name1=value, name2=value2, ......}
返回值
虚拟表单序列化后的字符串,其格式如:username=%E5%95%8A%E8%94%A1&password=123456
代码如下:
<form>
<div><inputtype="text"name="a"value="1"id="a"/></div>
<div><inputtype="text"name="b"value="2"id="b"/></div>
<div><inputtype="hidden"name="c"value="3"id="c"/></div>
<div>
<textareaname="d"rows="8"cols="40">4</textarea>
</div>
<div><selectname="e">
<optionvalue="5"selected="selected">5</option>
<optionvalue="6">6</option>
<optionvalue="7">7</option>
</select></div>
<div>
<inputtype="checkbox"name="f"value="8"id="f"/>
</div>
<div>
<inputtype="submit"name="g"value="Submit"id="g"/>
</div>
</form>
.serialize() 方法可以操作已选取个别表单元素的 jQuery 对象,比如 <input>, <textarea> 以及 <select>。不过源码天空,选择 <form> 标签本身进行序列化一般更容易些:
$('form').submit(function(){
alert($(this).serialize());
returnfalse;
});
输出标准的查询字符串:
a=1&b;=2&c;=3&d;=4&e;=5
$POST方式提交表单
$.post
jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求
参数:
url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
代码如下:
$.post("momsg.php",{"tel":$("#username").val()},function(data){
if(data==0)//0 成功 1 不成功 2 手机号码格式不对
{
//
}
});
通过 AJAX POST 请求改变 div 元素的文本:
代码如下:
$("input").keyup(function(){
txt=$("input").val();
$.post("demo_ajax_gethint.asp",{suggest:txt},function(result){
$("span").html(result);
});
});
Jquery ajax提交表单几种方法的更多相关文章
- Jquery ajax提交表单几种方法详解
[导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...
- JQuery ajax提交表单及表单验证
JQuery ajax提交表单及表单验证 博客分类: jsp/html/javascript/ajax/development Kit 开源项目 注:经过验证,formValidator只适合一个 ...
- jQuery ajax 提交表单图片
基于 jQuery HTML: <form id="form" enctype="multipart/form-data"> <input t ...
- jquery Ajax提交表单数据
//表单中控件的name要和实体类字段属性一致 $.ajax({ cache: true, type: "POST", url:ajaxCallUrl, data:$('#your ...
- jquery ajax 提交表单(file && input)
用到的插件 jquery.js jquery.form.js[http://malsup.github.io/jquery.form.js] 提交页面 <form enctype="m ...
- Validator验证Ajax提交表单的方法
Validator验证Ajax提交表单的方法 转自:http://hunanpengdake.iteye.com/blog/1671360 当我们在一些稍微复杂的业务时,可能会遇到需要多个表单form ...
- jquery ajax提交表单数据的两种方式
http://www.kwstu.com/ArticleView/kwstu_201331316441313 貌似AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职 ...
- jquery实现ajax提交表单
一般情况下,我们提交form表单采用的是submit的方法,典型的场景如下. <form id="thisForm" method="post" acti ...
- php使用jquery Form ajax 提交表单,并上传文件
在html5中我们通过FormData就可以ajax上传文件数据,不过因为兼容问题.我们选用jquery.form.min.js来进行ajax的表单提交. 一.jquery.form.js下载地址 ...
随机推荐
- [转]SQL SERVER – Importance of Database Schemas in SQL Server
原文地址http://blog.sqlauthority.com/2009/09/07/sql-server-importance-of-database-schemas-in-sql-server/ ...
- CORS浏览器跨域
在SO上发现一个解释跨域很棒的,忍不住拿过来 链接在此:http://stackoverflow.com/questions/10636611/how-does-access-control-allo ...
- jQuery 隐藏/显示
1.如何隐藏部分文本(简单案例) //样式 <style type="text/css"> div.ex { bac ...
- 手机移动端WEB资源整合
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...
- LeetCode: Product of Array Except Self
Dynamic Programming public class Solution { public int[] productExceptSelf(int[] nums) { int[] ans = ...
- Ref和Out参数的区别(转帖)
首先,如果不使用这两个关键字,那是什么样 呢? 看下面的例子: using System; class Test { static void Swap(ref int x, ref int ...
- html5 离线存储
在html页面中引入manifest文件 <html manifest="sample.appcache"> 在服务器添加mime-type text/cache-ma ...
- 【转】移动前端不得不了解的html5 head 头标签
来源:http://blog.csdn.net/huang100qi/article/details/42596799 本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head ...
- linux shell脚本使用结构化命令(2)
一.for命令 二.while命令 三.until命令 1.for命令基本格式 for var in list do commands done oracle@suse:~/testshell> ...
- iOS8.3发布了Swift 1.2带来哪些新变化
苹果前几日在面向开发者推送iOS 8.3 Beta的同时,还发布了版本号为6D520o的Xcode 6.3 Beta,其中便包含了iOS 8.3 Beta和OS X v10.10 SDK,并进一步提升 ...