jquery post提交表单用法详解

发表于: sitebuild | 作者: darkmi | 日期: 2016/02/28 08:00
标签: jquery
字号:

在jquery中提交表单可以使用$.post带参数直接实现post提交数据,也可以利用ajax的type=post来实现post提交数据,下面我来介绍一下

jquery `$.post方法

在jquery中有这样一个方法,$.post()下面就这个方法做一个简单的实例:

jQuery.post( url, [data], [callback], [type] ):

使用POST方式来进行异步请求

参数:

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

type (String) : (可选)官方的说明是:Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

例

使用POST请求Ajax的代码如下:

$.post(
	"student/Upload-addQuestion.action",
	{
	questionTypeName:questionTypeName,
	questionsTitle:questionsTitle,
	chapterId:chapterId,
	questionContent:questionContent,
	answerContent:answerContent,
	answerExplain:answerExplain
	},
	function(data,textStatus){
	alert(data);
	$('.question_summary').val("");
	$('.quesion_textarea').val("");
	$('#question_answer').val();
	$('#question_answer_tips').val();
	}
);

这里的questionTypeName是变量名,也可以直接在html中获取,如:

questionTypeName:$(‘#question_type’).val();

jquery ajax 设置type=post方法

$.ajax的一般格式

$.ajax({
type: 'POST',
url: url ,
data: data ,
success: success ,
dataType: dataType
});

二、$.ajax的参数描述

url 必需。规定把请求发送到哪个 URL。

data 可选。映射或字符串值。规定连同请求发送到服务器的数据。

success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。

dataType 可选。规定预期的服务器响应的数据类型。

默认执行智能判断(xml、json、script 或 html)。

参数描述

三、$.ajax需要注意的一些地方:

1.data主要方式有三种,html拼接的,json数组,form表单经serialize()序列化的;通过dataType指定,不指定智能判断。

2.$.ajax只提交form以文本方式,如果异步提交包含上传是传过不过去,需要使用jquery.form.js的$.ajaxSubmit

<script type="text/javascript" src="/include/jquery/jquery-1.1.3.1.pack.js"></script>
<form name="form1" id="form1" action="ajax.aspx?action=1" method="post">
<input type="hidden" id="comid" name="comid" value="111">
<input type="hidden" id="jobid" name="jobid" value="222">
<input type="hidden" id="userid" name="userid" value="333">
<input type="submit" /></form>
<script language="javascript">
$("#form1").submit
(
function()
{
login();
return false;
}
);
function login()
{
var comid = $("#comid").val();
var jobid = $("#jobid").val();
var userid = $("#userid").val();
$.ajax({
type: "POST",
url: "../include/ajax.php",
data: "action=1" + "&comid=" + comid + "&jobid=" + jobid + "&userid=" + userid,
beforeSend: function(){
},
success: function(msg){
if(msg=="success"){
alert("提交成功!")
}else {
alert("请不要重复提交!");
}
}
});
}
</script>

切换主题切换主题
返回顶部