jquery提交form表单数据,jq获取form表单提交数据

http://www.itjxue.com  2023-01-16 15:19  来源:未知  点击次数: 

jquery或js前端提交数据的几种方式

1.jquery提交数据的方式:

(1)第一种jquery序列化提交数据方式:

通过id获取的form表单元素.serialize();

(2)第二种模拟form表单提交元素:

$('#form表单id').attr('method','post');

$('#form表单id'').find('input[name="type"]').val(test);

$('#form表单id').find('input[name="dfrom_to1"]').val(dfrom_to);

$('#form表单id').find('input[name="gt_road_new"]').val(gt_road);

$('#form表id').attr('action',AdminLTE.ctx+'/modules/ltegt/findAllCoverAndInterfere.do');

$('#analysisForm').submit();

2.js提交数据的方式:

(1).js提交表单( .submit()方法提交表单 )

function doSearch(){

var action ="%=path%/User_queryAllUser";

document.all.form.action = action;

document.all.form.submit();}

(2).js替代超链接( window.location.href )

input type="button" id="modify" value="修改工号" οnclick="modifyEmp(${ myList.employeeId })"

//js不能起名为modify,为敏感关键字

function modifyEmp( employeeId ){

//employeeId 作为js的参数传递进来

window.location.href = '%=path%/User_openUserUpdate?employeeId='+employeeId;

如何用jqueryajax请求form表单

第一步:引用js

?

!--这里的min是自己用js压缩工具对完整版进行的压缩

并不是真正的min,所以好使--

script?type="text/javascript"?src="js/jquery-1.7.min.js"/script

script?type="text/javascript"?src="js/jquery.form.js"/script

第二步:页面写form

form?id="showDataForm"?

action="/024pm/f_shopUser.do?method=login"?method="post"

?input?type="text"?value=""?name="name"?maxlength="2"/

?input?type="password"?value=""?name="password"?maxlength="2"/

?input?type="submit"?value="提交"/

/form

div?id="output1"?

style="width:1000px;height:200px;"

/div

第三步:写js调用jquery.form.js,对form表单进行ajax提交

$(document).ready(function()?{

?var?options?=?{

??target:?'#output1',

??//?从服务传过来的数据显示在这个div内部

?也就是ajax局部刷新

??beforeSubmit:?showRequest,

?//?ajax提交之前的处理

??success:??showResponse

?//?处理之后的处理

?};

?$('#showDataForm').submit(function()?{

??$(this).ajaxSubmit(options);

??return?false;?

??//非常重要,如果是false,则表明是不跳转

??//在本页上处理,也就是ajax,如果是非false,则传统的form跳转。

?});

});

function?showResponse(responseText,?statusText,?xhr,?$form)?{

?alert(xhr.responseText+"=="+$form.attr("method")+'status:?'?+?

?statusText?+?'\n\nresponseText:?\n'?+?responseText);

//xhr:说明你可以用ajax来自己再次发出请求

//$form:是那个form对象,是一个jquery对象

//statusText:状态,成功则为success

//responseText,服务器返回的是字符串(当然包括html,不包括json)

}

function?showRequest(formData,?jqForm,?options)?{

?//formData是数组,就是各个input的键值map数组

?//通过这个方法来进行处理出来拼凑出来字符串。

?//formData:拼凑出来的form字符串,比如name=herapassword,

?//其实就是各个表单中的input的键值对,

?//如果加上method=XXXX,那也就是相当于ajax内的data。

?var?queryString?=?$.param(formData);

?alert(queryString+"======"+formData.length);

?for?(var?i=0;?i??formData.length;?i++)?{

?alert(formData[i].value+"==============="+formData[i].name);

?}

?//jqForm,jquery?form对象

?var?formElement?=?jqForm[0];

?alert($(formElement).attr("method"));

?alert($(jqForm[0].name).attr("maxlength"));

?//非常重要,返回true则说明在提交ajax之前你验证

?//成功,则提交ajax?form

?//如果验证不成功,则返回非true,不提交

?return?true;

}

options对象内的值有哪些?

var?options?=?{

?target:?'#output1',?

?data:{param1:"我自己的第一个额外的参数"},

//这个参数是指通过ajax来给服务器提交除了form内部input的参数

//在后台中使用String?param1=req.getParameter("param1");获取。

?//?dataType:?null,

?dataType:'json',

//这个参数值的是服务器返回的数据类型,默认的是null

//也就是服务器可以默认返回字符串,然后将这些字符串放在target内部

//当然还有json、xml,其中最常用的便是null和json

//对于span?style="color:?#333333;"a?href=""?target="_blank"span?style="color:?#333333;"json/span/a/span的使用,我们会稍后讲解到

?beforeSubmit:?showRequest,

?success:??successRes,

?type:'POST'

?//提交方式,默认是自己在form标签上指定的method

?//如果没有指定,则使用get。

?url:''

?//重新提交的url,即url可以在form中配置

?//也可以在这里配置。

};

Jquery通过Ajax方式来提交Form表单

ajax提交表单说白了就是,用ajax把数据post都后台去而已。你可以在后台把数据打印一下看看是否成功,再做进一步调试。

js或jQuery如何实现提交form表单,保存数据到数据库,同时打开一个新的窗口,并且带入刚保存的数据的ID

这个建议你用ajax来完成。

以jq的ajax为例

==============

$("#form").submit(function(){

var strArray=$(this).serializeArray();//将form表单转为数组形式序列化表单

$.post("你要提交的后台页面地址",strArray,function(result,status){

//result是由后台返回的id

//status是状态,为success时成功。

if(status=="success"){

window.open("要打开的新窗口地址?id="+result);//打开一个新窗口,并用get方法传入id

}

});

return false;//此句是防止页面提交

});

=================

以上是jq代码。

后台代码,要看你用的是什么语言了。

比如说php,有个msyql_insert_id();可以获取最后一条插入记录的id。

如果是asp,可以用select top 1 id from 表 order by id desc的方法来获取id。

=================

后台插入数据库的代码,就由你自己来写了。

新打开的窗口,只需获取id即可

jquery表单提交数据 的几个方法

jquery表单提交数据的方法有两种:

一种是直接提交,调用submit()方法,

第二种是用ajax提交,ajax提交要注意讲数据序列化。

比如:

1、调用submit()方法

$(表单).submit();

2、ajax提交

$.ajax({

url: url,

data: $(表单).serialize(),

type: 'post',

success: function (data) {

}

});

(责任编辑:IT教学网)

更多

推荐ASP.NET教程文章