Jquery中ajax提交表单几种方法(get、post两种方法)

在jquery中ajax提交表单有post与get方式，在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了，下面我来介绍两个提交表单数据的方法。$get方式提交表单get() 方法通过远程HTTP ，下面我来介绍两个提交表单数据的方法。

$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

 
 
 
 
 
4 
 
<selectname="e"> 
5 
6 
7 
 
 
 
 
 
 
 
 
.serialize() 方法可以操作已选取个别表单元素的 jQuery 对象，比如 ,  以及 <select>。不过源码天空，选择 <form> 标签本身进行序列化一般更容易些： 
$('form').submit(function(){ 
alert($(this).serialize()); 
returnfalse; 
});</pre>

<p style="TEXT-INDENT: 2em">输出标准的查询字符串：</p>
<p style="TEXT-INDENT: 2em">a=1&b;=2&c;=3&d;=4&e;=5</p>
<p style="TEXT-INDENT: 2em"><span style="color: #0000ff">$POST方式提交表单</span></p>
<p style="TEXT-INDENT: 2em">$.post</p>
<p style="TEXT-INDENT: 2em">jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求</p>
<p style="TEXT-INDENT: 2em">参数：</p>
<p style="TEXT-INDENT: 2em">url (String) : 发送请求的URL地址.</p><p style="TEXT-INDENT: 2em">
data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。</p><p style="TEXT-INDENT: 2em">
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。</p><p style="TEXT-INDENT: 2em">
</p>

<pre class="brush:js;">
$.post("momsg.php",{"tel":$("#username").val()},function(data){
if(data==0)//0 成功 1 不成功 2 手机号码格式不对
  {   
   //  
  }  
});</pre>

<p style="TEXT-INDENT: 2em">通过 AJAX POST 请求改变 div 元素的文本：</p>

<pre class="brush:js;">
$("input").keyup(function(){
 txt=$("input").val();
 $.post("demo_ajax_gethint.asp",{suggest:txt},function(result){
  $("span").html(result);
 });
});</pre>

<p style="TEXT-INDENT: 2em">实例</p>

<pre class="brush:js;">
<script type="text/javascript">
function adddata()
  {
   var typeName=$("#<%=this.typeName.ClientID%>").val();
   var msg=" not be empty";
   if(typeName=="")
   {
    if(msg!="")
     {
      alert(msg);
      return false;
     }
   }
   else
   {
     //显示进度条
     $("#loading").ajaxStart(function(){
     $(this).show();
     });
     //提交前触发的事件
     $("#msg").ajaxSend(function(request, settings){$(this).append("<li>Starting request at " + settings.url + "</li>");});
     //这里的countryid 可以动态从GridView里面取
     var countryid= $("#<%=this.drpCountry.ClientID%>").val();//获取下拉菜单值
     var countryname=format_get_name(countryid);//获取下拉菜单文本
     var typeName = $("#<%=this.typeName.ClientID%>").val();//获取txt为typeName的值
     var showTypeDesc = $("#<%=this.showTypeDesc.ClientID%>").val();//获取txt为showTypeDesc的值
      //调用Juqery Ajax
      $.ajax({
      type: "POST",
      url: "addNews.aspx",
      timeout: 20000,
      error: function(){alert('error');},
      data: "countryid="+countryid+"&countryname="+countryname+"&typeName="+typeName+"&showTypeDesc="+showTypeDesc,
      success: function(msg)
      {
      var text=msg.split('<');
      //当AJAX请求失败时添加一个被执行的方法
      $("#msg").ajaxError(function(request, settings){
      $(this).append("<li>Error requesting page " + settings.url + "</li>");
      });
      //当AJAX请求成功时添加一个被执行的方法
      $("#msg").ajaxSuccess(function(request, settings){
      $(this).append(text[0]);
      });
     //清空文本里面的值
      $("#<%=this.typeName.ClientID%>").val("");
      $("#<%=this.showTypeDesc.ClientID%>").val("");
      return false;
      }
      });
   }
  }
  //获取下拉菜单里面的文本内容
  function format_get_name(id)
  {
    var drp = $('<%=drpCountry.ClientID%>');
    for ( var i =0;i<drp.options.length;i++)
    {
      if ( drp.options[i].value == id )
      {
        return drp.options[i].text;
      }
    }
    return '';
  }
</script></pre>

<p style="TEXT-INDENT: 2em">以上内容就是全福编程网小编给大家分享的Jquery中ajax提交表单几种方法(get、post两种方法)，希望对大家有所帮助。</p></div>
                <div class="prev-next">
					<div class="prev">上一篇：<a href="/ajax/item-25904.html">jQuery中ajax - post() 方法实例详解</a></div><div class="next">下一篇：<a href="/ajax/item-25900.html">基于Ajax实现下拉框联动显示数据</a></div>
				</div>
			</div>
			<!--广告 start-->
			<div class="qf-ads"><ul class="qf-ads-nUl-12"><li><a href="" target="_blank"><img src="/uploads/images/ads/202306/20230610084915300842.jpg"></a><a href="" target="_blank" class="alink"><label>广告</label><span>商业广告，理性选择</span></a></li></ul></div>
			<div class="qf-article-container">
				<div class="qf-cms-name">
					<h3>相关推荐</h3>
				</div>
				<div class="qf-cms-container">
					<ul class="article-list-relationship">
											<li><a href="/ajax/item-19804.html" title="ajax设置async校验用户名是否存在的实现方法" target="_blank">ajax设置async校验用户名是否存在的实现方法</a>
						</li>
											<li><a href="/ajax/item-19805.html" title="IE下Ajax提交乱码的快速解决方法" target="_blank">IE下Ajax提交乱码的快速解决方法</a>
						</li>
											<li><a href="/ajax/item-19806.html" title="Ajax表单异步上传文件实例代码（包括文件域）" target="_blank">Ajax表单异步上传文件实例代码（包括文件域）</a>
						</li>
											<li><a href="/ajax/item-19807.html" title="Ajax 高级功能之ajax向服务器发送数据" target="_blank">Ajax 高级功能之ajax向服务器发送数据</a>
						</li>
											<li><a href="/ajax/item-19802.html" title="js+ajax处理java后台返回的json对象循环创建到表格的方法" target="_blank">js+ajax处理java后台返回的json对象循环创建到表格的方法</a>
						</li>
											<li><a href="/ajax/item-19803.html" title="Ajax获取数据然后显示在页面的实现方法" target="_blank">Ajax获取数据然后显示在页面的实现方法</a>
						</li>
											<li><a href="/ajax/item-19801.html" title="ajax同步验证单号是否存在的方法" target="_blank">ajax同步验证单号是否存在的方法</a>
						</li>
											<li><a href="/ajax/item-19800.html" title="Ajax 异步加载解析" target="_blank">Ajax 异步加载解析</a>
						</li>
											<li><a href="/ajax/item-19799.html" title="Ajax技术组成与核心原理分析" target="_blank">Ajax技术组成与核心原理分析</a>
						</li>
											<li><a href="/ajax/item-19798.html" title="图文解析AJAX的原理" target="_blank">图文解析AJAX的原理</a>
						</li>
											<li><a href="/ajax/item-19796.html" title="ajax方式实现注册功能(提交数据到后台数据库完成交互)" target="_blank">ajax方式实现注册功能(提交数据到后台数据库完成交互)</a>
						</li>
											<li><a href="/ajax/item-19797.html" title="Ajax结合php实现二级联动" target="_blank">Ajax结合php实现二级联动</a>
						</li>
											<li><a href="/ajax/item-19795.html" title="AJAX应用中必须要掌握的重点知识(分享)" target="_blank">AJAX应用中必须要掌握的重点知识(分享)</a>
						</li>
											<li><a href="/ajax/item-19793.html" title="Ajax+php实现商品分类三级联动" target="_blank">Ajax+php实现商品分类三级联动</a>
						</li>
											<li><a href="/ajax/item-19794.html" title="Ajax商品分类三级联动的简单实现(案例)" target="_blank">Ajax商品分类三级联动的简单实现(案例)</a>
						</li>
											<li><a href="/ajax/item-19792.html" title="ajax异步请求刷新" target="_blank">ajax异步请求刷新</a>
						</li>
											<li><a href="/ajax/item-19790.html" title="通过Ajax方式上传文件使用FormData进行Ajax请求" target="_blank">通过Ajax方式上传文件使用FormData进行Ajax请求</a>
						</li>
											<li><a href="/ajax/item-19791.html" title="jQuery Ajax方式上传文件的方法" target="_blank">jQuery Ajax方式上传文件的方法</a>
						</li>
											<li><a href="/ajax/item-19789.html" title="Ajax学习全套(最全最经典)" target="_blank">Ajax学习全套(最全最经典)</a>
						</li>
											<li><a href="/ajax/item-19785.html" title="使用ajax技术实现txt弹出在页面上的方法" target="_blank">使用ajax技术实现txt弹出在页面上的方法</a>
						</li>
										</ul>
				</div>	
			</div>
		</div>
		<div class="sidebar">
			<!--广告 start-->
			<div class="qf-ads"><ul class="qf-ads-nUl-9"><li><a href="https://www.aliyun.com/activity/new/index?userCode=6qkxlezw" target="_blank"><img src="/uploads/images/ads/202306/20230609231605989299.jpg"></a><a href="https://www.aliyun.com/activity/new/index?userCode=6qkxlezw" target="_blank" class="alink"><label>广告</label><span>商业广告，理性选择</span></a></li></ul></div>
			<div class="qf-cms-name">
				<h3>文章分类</h3>
			</div>
			<div class="qf-cms-container">
				<div class="qf-category-list">
									<a href="/php/index.html" title="PHP编程" target="_blank">PHP编程</a>
									<a href="/regular/index.html" title="正则表达式" target="_blank">正则表达式</a>
									<a href="/javascript/index.html" title="JavaScript" target="_blank">JavaScript</a>
									<a href="/css/index.html" title="CSS/HTML" target="_blank">CSS/HTML</a>
									<a href="/rss/index.html" title="XML/RSS" target="_blank">XML/RSS</a>
									<a href="/ajax/index.html" title="AJAX相关" target="_blank">AJAX相关</a>
									<a href="/programming/hacker/index.html" title="黑客相关" target="_blank">黑客相关</a>
									<a href="/programming/other/index.html" title="相关技巧" target="_blank">相关技巧</a>
								</div>
			</div>
			<div class="qf-cms-name">
				<h3>热门关键词</h3>
			</div>
			<div class="qf-cms-container">
				<div class="qf-tag-list">
									<a href="https://zhannei.baidu.com/cse/site?q=雪佛兰&cc=fuphp.cn&ie=utf-8" title="雪佛兰" target="_blank">雪佛兰</a>
									<a href="https://zhannei.baidu.com/cse/site?q=通用&cc=fuphp.cn&ie=utf-8" title="通用" target="_blank">通用</a>
									<a href="https://zhannei.baidu.com/cse/site?q=奢华&cc=fuphp.cn&ie=utf-8" title="奢华" target="_blank">奢华</a>
									<a href="https://zhannei.baidu.com/cse/site?q=劳斯莱斯&cc=fuphp.cn&ie=utf-8" title="劳斯莱斯" target="_blank">劳斯莱斯</a>
									<a href="https://zhannei.baidu.com/cse/site?q=旗舰版&cc=fuphp.cn&ie=utf-8" title="旗舰版" target="_blank">旗舰版</a>
									<a href="https://zhannei.baidu.com/cse/site?q=64位&cc=fuphp.cn&ie=utf-8" title="64位" target="_blank">64位</a>
									<a href="https://zhannei.baidu.com/cse/site?q=收藏夹&cc=fuphp.cn&ie=utf-8" title="收藏夹" target="_blank">收藏夹</a>
									<a href="https://zhannei.baidu.com/cse/site?q=解调器&cc=fuphp.cn&ie=utf-8" title="解调器" target="_blank">解调器</a>
									<a href="https://zhannei.baidu.com/cse/site?q=网卡&cc=fuphp.cn&ie=utf-8" title="网卡" target="_blank">网卡</a>
									<a href="https://zhannei.baidu.com/cse/site?q=网线&cc=fuphp.cn&ie=utf-8" title="网线" target="_blank">网线</a>
									<a href="https://zhannei.baidu.com/cse/site?q=分辨率&cc=fuphp.cn&ie=utf-8" title="分辨率" target="_blank">分辨率</a>
									<a href="https://zhannei.baidu.com/cse/site?q=家电&cc=fuphp.cn&ie=utf-8" title="家电" target="_blank">家电</a>
									<a href="https://zhannei.baidu.com/cse/site?q=4k&cc=fuphp.cn&ie=utf-8" title="4k" target="_blank">4k</a>
									<a href="https://zhannei.baidu.com/cse/site?q=显示器&cc=fuphp.cn&ie=utf-8" title="显示器" target="_blank">显示器</a>
									<a href="https://zhannei.baidu.com/cse/site?q=header&cc=fuphp.cn&ie=utf-8" title="header" target="_blank">header</a>
									<a href="https://zhannei.baidu.com/cse/site?q=USER_AGENT&cc=fuphp.cn&ie=utf-8" title="USER_AGENT" target="_blank">USER_AGENT</a>
									<a href="https://zhannei.baidu.com/cse/site?q=色彩&cc=fuphp.cn&ie=utf-8" title="色彩" target="_blank">色彩</a>
									<a href="https://zhannei.baidu.com/cse/site?q=图形&cc=fuphp.cn&ie=utf-8" title="图形" target="_blank">图形</a>
									<a href="https://zhannei.baidu.com/cse/site?q=商业&cc=fuphp.cn&ie=utf-8" title="商业" target="_blank">商业</a>
									<a href="https://zhannei.baidu.com/cse/site?q=生成&cc=fuphp.cn&ie=utf-8" title="生成" target="_blank">生成</a>
					
				</div>
			</div>
			<!--广告 start-->
			<div class="qf-ads"><ul class="qf-ads-nUl-10"><li><a href="https://www.aliyun.com/activity/new/index?userCode=6qkxlezw" target="_blank"><img src="/uploads/images/ads/202306/20230609231537994005.jpg"></a><a href="https://www.aliyun.com/activity/new/index?userCode=6qkxlezw" target="_blank" class="alink"><label>广告</label><span>商业广告，理性选择</span></a></li></ul></div>
			<div class="qf-cms-name">
				<h3>热门文章</h3>
			</div>
			<div class="qf-cms-container">
				<ul class="qf-article-list">
													<li><em>1</em>
						<a href="/cehua/item-29482.html" title="什么是Meta标签？ 哪些Meta标签对搜索引擎SEO优化有作用？" target="_blank">什么是Meta标签？ 哪些Meta标签对搜索引擎SEO优化有作用？</a>
					</li>
									<li><em>2</em>
						<a href="/mac/item-22368.html" title="Mac设置VPN来登录youtube等国外网站的步骤" target="_blank">Mac设置VPN来登录youtube等国外网站的步骤</a>
					</li>
									<li><em>3</em>
						<a href="/qilin/item-30816.html" title="Openvpn在麒麟操作系统上的配置方法" target="_blank">Openvpn在麒麟操作系统上的配置方法</a>
					</li>
									<li><em>4</em>
						<a href="/jingyan/item-20869.html" title="各大搜索引擎登录入口,网站收录入口" target="_blank">各大搜索引擎登录入口,网站收录入口</a>
					</li>
									<li><em>5</em>
						<a href="/bios/item-23598.html" title="联想笔记本BIOS设置图解中文详细说明" target="_blank">联想笔记本BIOS设置图解中文详细说明</a>
					</li>
									<li><em>6</em>
						<a href="/mac/item-23040.html" title="Mac怎么切换主显示器 苹果电脑Mac双显示器设置主显方法图解" target="_blank">Mac怎么切换主显示器 苹果电脑Mac双显示器设置主显方法图解</a>
					</li>
									<li><em>7</em>
						<a href="/bios/item-27940.html" title="AMI BIOS设置图解教程+Award Bios设置全程图解" target="_blank">AMI BIOS设置图解教程+Award Bios设置全程图解</a>
					</li>
									<li><em>8</em>
						<a href="/tools/item-30528.html" title="分享10个常见的SQL注入工具" target="_blank">分享10个常见的SQL注入工具</a>
					</li>
									<li><em>9</em>
						<a href="/yunying/other/item-29261.html" title="分享最受美国人喜欢的十大搜索引擎" target="_blank">分享最受美国人喜欢的十大搜索引擎</a>
					</li>
									<li><em>10</em>
						<a href="/mac/item-23628.html" title="mac系统中自带的邮件程序怎么添加qq邮箱帐号?" target="_blank">mac系统中自带的邮件程序怎么添加qq邮箱帐号?</a>
					</li>
								</ul>
			</div>
			<div class="qf-cms-name">
				<h3>最新更新</h3>
			</div>
			<div class="qf-cms-container">
				<ul class="qf-article-list">
													<li><a href="/changshi/item-79334.html" title="无线路由器经常断线 故障解决" target="_blank">无线路由器经常断线 故障解决</a>
					</li>
									<li><a href="/changshi/item-79351.html" title="怎么在Mac上设置锁屏不待机" target="_blank">怎么在Mac上设置锁屏不待机</a>
					</li>
									<li><a href="/changshi/item-79354.html" title="VHD和VHDX硬盘格式有什么区别?" target="_blank">VHD和VHDX硬盘格式有什么区别?</a>
					</li>
									<li><a href="/changshi/item-79363.html" title="关闭Aero Shake节约系统资源的方法" target="_blank">关闭Aero Shake节约系统资源的方法</a>
					</li>
									<li><a href="/changshi/item-79362.html" title="怎么更改Mac中的邮件字体大小" target="_blank">怎么更改Mac中的邮件字体大小</a>
					</li>
									<li><a href="/changshi/item-79371.html" title="提高WIN7系统开机速度方法分享" target="_blank">提高WIN7系统开机速度方法分享</a>
					</li>
									<li><a href="/changshi/item-79361.html" title="Mac系统怎么更改用户登录密码" target="_blank">Mac系统怎么更改用户登录密码</a>
					</li>
									<li><a href="/changshi/item-79358.html" title="Mac上如何修改时间和日期" target="_blank">Mac上如何修改时间和日期</a>
					</li>
									<li><a href="/changshi/item-79366.html" title="如何将常用应用固定至开始屏幕或任务栏" target="_blank">如何将常用应用固定至开始屏幕或任务栏</a>
					</li>
									<li><a href="/mysql/item-79372.html" title="MySQL中replace into语句的用法详解（insert into 的增强版）" target="_blank">MySQL中replace into语句的用法详解（insert into 的增强版）</a>
					</li>
								</ul>
			</div>
			<!--广告 start-->
			<div class="qf-ads qf-ads-ontop"><ul class="qf-ads-nUl-11"><li><a href="http://www.hnqfu.cn" target="_blank"><img src="/uploads/images/ads/202306/20230610081510415263.jpg"></a><a href="http://www.hnqfu.cn" target="_blank" class="alink"><label>广告</label><span>商业广告，理性选择</span></a></li></ul></div>
		</div>
	</div>
</div>

<script type="text/javascript">
var scrollPh = 1680;
layui.use('code', function(){
	layui.code({
		elem: 'pre',
		title: '代码',
		encode: false,
		ln: true,
		//skin: 'dark',
		//about: '123',
		about: [
			//'<a href="javascript:;">复制</a>'
		]
	});
});
</script>

<div class="wrap bottom">
	<div class="wrapper clearfix">
		<div class="links">
			<a href="http://www.fuphp.cn">网站首页</a>
							　|　<a href="/aboutus.html">关于我们</a>
							　|　<a href="/wangzhanshengming.html">免责声明</a>
							　|　<a href="/guanggaohezuo.html">广告合作</a>
							　|　<a href="/contact.html">联系我们</a>
					</div>
		<div class="copyright">
			Copyright @ 2015-2024 <a href="" title="河南全福网络科技有限公司专业网制设计制作，PHP二次开发">福编程 fuphp</a> All Rights Reserved.
		</div>
		<div class="copyright">
			<a href="http://beian.miit.gov.cn" target="_blank" rel="nofollow">豫ICP备15036959号-4</a>
		</div>
    </div>
</div>

<script type="text/javascript">
layui.config({
	base: '/static/js/layuiadmin/' //静态资源所在路径
}).extend({
	qf: '../qfplus/qf/qf',
	contact: '../qfplus/contact/contact',
}).use(['contact'], function(){
	var contact = layui.contact;
	contact.render({'position':	'left', 'oappend':'.qf-quick-bar'});
	//菜单
	jQuery(".submenu").slide({ 
		type:"menu",// 效果类型，针对菜单/导航而引入的参数（默认slide）
		titCell:".nLi", //鼠标触发对象
		targetCell:".sub", //titCell里面包含的要显示/消失的对象
		titOnClassName:'current',
		effect:"slideDown", //targetCell下拉效果
		delayTime:300 , //效果时间
		triggerTime:0, //鼠标延迟触发时间（默认150）
		returnDefault:true //鼠标移走后返回默认状态，例如默认频道是“预告片”，鼠标移走后会返回“预告片”（默认false）
	});
	//表单
	var form = layui.form;
	form.render(null, 'component-form');
	/* 监听提交 */
	form.on('submit(component-form-submit)', function(data){
		var searchkey = data.field.searchkey;
		return true;
	});
	//滚动固顶
	$(document).scroll(function(){
		var sTop = $(document).scrollTop();
		if( sTop >= scrollPh ){
			$('.qf-ads-ontop').css({'position':'fixed', 'top':'0'});
		}else{
			$('.qf-ads-ontop').css({'position':'relative'});
		}
	});
});
<!--百度统计------------------>
</script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?9eb8fd7c57fefc4283caaf6d0c7e37f7";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>