js实现json方式提交数据到服务端

作者：袖梨 2022-06-25

大概需求就是前端要把数据组装成json，传给后端。首先，在客户端，通过javascript脚本将页面表单数据封装成json格式.getjsondata()函数完成了这一功能.然后我们通过$.ajax()方法将数据发送到服务端，其中用到了json.stringify()方法，它可以将客户端发送地数据转换成json对象

直接上代码：

 代码如下 复制代码

 $.ajax({ 
        type: "POST", 
        url: "RequestData.ashx", 
        contentType: "application/json; charset=utf-8", 
        data: JSON.stringify(GetJsonData()), 
        dataType: "json", 
        success: function (message) { 
            if (message > 0) { 
                alert("请求已提交！我们会尽快与您取得联系"); 
            } 
        }, 
        error: function (message) { 
            $("#request-process-patent").html("提交数据失败！"); 
        } 
    }); 
}); 
 
function GetJsonData() { 
    var json = { 
        "classid": 2, 
        "name": $("#tb_name").val(), 
        "zlclass": "测试类型1,测试类型2,测试类型3", 
        "pname": $("#tb_contact_people").val(), 
        "tel": $("#tb_contact_phone").val() 
    }; 
    return json; 

上面的例子是在博客园找到的 ，但这是最简单的一种json格式，我们在做项目中肯定会遇到json里有数组，然后我改造了以下，也直接上代码吧，

 代码如下 复制代码

$.ajax({ 
       type: "POST", 
       url: "RequestData.do", 
       contentType: "application/json; charset=utf-8", 
       data: JSON.stringify(GetJsonData()), 
       dataType: "json", 
       success: function (message) { 
           if (message > 0) { 
            $(".posting").remove(); 
               $(".main_con").append("

提交数据成功！

"); 
           } 
       }, 
       error: function (message) { 
        $(".posting").remove(); 
        $(".main_con").append("

提交数据失败！

"); 
       } 
   }); 
   function GetJsonData() { 
    var teamdata=[]; 
    for(var i=0; i<$(".onjob-lsit tr").length; i++){ 
        var teamobj ={ 
            "teamRelname":$(".teamRelname").eq(i).text(),  
            "teamTel":$(".teamTel").eq(i).text(),  
            "teamStartDate":$(".teamStartDate").eq(i).text(),  
            "teamEndtDate":$(".teamEndtDate").eq(i).text(),  
            "teamRemark":$(".teamRemark").eq(i).text() 
        }; 
        teamdata.push(teamobj); 
    } 
     
    var json = { 
        "onteamName": $(".onteamName").val(), 
        "forteamName": $(".forteamName").val(), 
        "teamList":teamdata 
         
    }; 
    return json; 
    } 

相关文章

精彩推荐