表单数据提交

1、submit提交表单

<form id="myForm" action="后台地址(例:js_form_action.asp)" method="post">
$("form").submit(function() {
  console.log($(this).serializeArray());
  return false;
});

2、serialize或serializeArray序列化表单数据后ajax提交(用于没有from时)

function saveData() {
    //将表单内容序列化为字符串:firstname=Hello&lastname=World
    //var parmas = $("#queryContent").find("input, select, :radio").serialize();
    //序列化表单元素,格式为:[{ name: 'firstname', value: 'Hello' },{ name: 'lastname', value: 'World' }]
    var params = $("#queryContent").find("input, select, :radio").serializeArray();
    //执行ajax调用后端
    $.ajax({
        type: 'post',
        url: '@Url.Content("~/Device/DeviceData/ExportSampleInfo")',
        datatype: 'json',
        data: params,
        success: function (data) {
            document.location.href = '@Url.Content("~/Device/DeviceData/OriginCode")?guid=' + data;
        },
        error: function () {
            alert('导出失败');
        }
    });
}

3、serializeArray序列化表单数据后转JSON后处理参数

 //此段可单独提出来作为公用模块
function exportData() {
    //序列化表单元素,格式为:[{ name: 'firstname', value: 'Hello' },{ name: 'lastname', value: 'World' }]
    var params = $("#queryContent").find("input, select, :radio").serializeArray();
    var paramjson = {};
    //将表单元素转换为JSON格式:{firstname: 'Hello', lastname: 'World' }
    $.each(params, function (i, v) {
        if (paramjson[v.name]) {
            paramjson[v.name] = paramjson[v.name] + "," + v.value;
        }
        else {
            paramjson[v.name] = v.value;
        }
    });
 //此段可单独提出来作为公用模块

    //处理特殊参数,可忽略此段
    var paramsWhere = '';
    $("#queryParam [id^= 'field']").each(function (i, n) {
        var text = $(n).combobox('getText');
        if (text) {
            paramsWhere += ' AND ' + $(n).attr('id') + '=\'' + $(n).combobox('getText') + '\' ';
        }
    });
    paramjson.paramsWhere = paramsWhere;
    //处理特殊参数,可忽略此段

    //执行ajax调用后端
    $.ajax({
        type: 'post',
        url: '@Url.Content("~/Device/DeviceData/ExportSampleInfo")',
        datatype: 'json',
        data: paramjson,
        success: function (data) {
            document.location.href = '@Url.Content("~/Device/DeviceData/OriginCode")?guid=' + data;
        },
        error: function () {
            alert('导出失败');
        }
    });
}

个人比较喜欢用第三种,以上的方式把路径换成自己的就能使用了,非常方便

 

posted @ 2021-01-18 17:21  背对太阳的向日葵  Views(70)  Comments(0Edit  收藏  举报