jquery中的几种表单提交方式-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_18296/article/details/82614085

本文介绍了使用jQuery简化网页交互的多种方式，包括通过$.post、form表单、ajaxSubmit及ajax实现数据提交的具体示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先导入jquery必须的js封装包：

    <script type="text/javascript" src="<%=basePath%>js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/jquery.form.js"></script>

2.以下介绍这几种方式：
使用jquery，首先要有这个东西：以下的例子都可以在这个里边，

$(document).ready(function(){

});

所有包括在$(document).ready()里面的元素或事件都将会在DOM完成加载之后立即加载，并且在页面内容加载之前。

【1】$.post方式
传一个参：

$.post(url,{参数1:'值1',参数2:'值2'},function(msg){
	if(msg=="true"){

	}
});

【2】form表单直接提交，要用form.js

$("#formid").submit();

【3】ajaxSubmit方式：

$("#myform").ajaxSubmit(function(msg){
	if(msg=="true"){

	}
});

【4】ajaxSubmit方式2：

var options = {
	//url : "add_module.do",
	type : "post",
	dataType : "html",
	success : function(msg){
		if(msg=="true"){

		}
	}
};
$("#myform").ajaxSubmit(options);

【5】ajax方式：

$(function(){
	$('#send').click(function(){
		$.ajax({
			type: "GET",
			url: "test.json",
			data: {username:$("#username").val(), content:$("#content").val()},
			dataType: "json",
			success: function(data){
			$('#resText').empty();   //清空resText里面的所有内容
			var html = ''; 
			$.each(data, function(commentIndex, comment){
				html += '<div class="comment"><h6>' + comment['username']
				+ ':</h6><p class="para"' + comment['content']
				+ '</p></div>';
				});
				$('#resText').html(html);
			}
		});
	});
});

【6】：使用load加载文件：

$('#test').load('/example/jquery/demo_test.txt');

【7】：load方式：

$("#myID").load("/test.html");//在id为#myID的元素里导入test.html运行后的结果
$("#myID").load("/test.html",{"name":"Adam"});//导入的php文件含有一个传递参数，类似于请求url：/test.html?name=Adam