前端以json方式提交数据到服务端

前端开发 3973 Views 1 Comments

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

直接上代码:

  1.  $.ajax({  
  2.         type: "POST",  
  3.         url: "RequestData.ashx",  
  4.         contentType: "application/json; charset=utf-8",  
  5.         data: JSON.stringify(GetJsonData()),  
  6.         dataType: "json",  
  7.         success: function (message) {  
  8.             if (message > 0) {  
  9.                 alert("请求已提交!我们会尽快与您取得联系");  
  10.             }  
  11.         },  
  12.         error: function (message) {  
  13.             $("#request-process-patent").html("提交数据失败!");  
  14.         }  
  15.     });  
  16. });  
  17.   
  18. function GetJsonData() {  
  19.     var json = {  
  20.         "classid": 2,  
  21.         "name": $("#tb_name").val(),  
  22.         "zlclass""测试类型1,测试类型2,测试类型3",  
  23.         "pname": $("#tb_contact_people").val(),  
  24.         "tel": $("#tb_contact_phone").val()  
  25.     };  
  26.     return json;  

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

  1. $.ajax({  
  2.        type: "POST",  
  3.        url: "RequestData.do",  
  4.        contentType: "application/json; charset=utf-8",  
  5.        data: JSON.stringify(GetJsonData()),  
  6.        dataType: "json",  
  7.        success: function (message) {  
  8.            if (message > 0) {  
  9.             $(".posting").remove();  
  10.                $(".main_con").append("<p style='text-align:center; padding:20px 0; background:#03f430;color:#fff;'>提交数据成功!</p>");  
  11.            }  
  12.        },  
  13.        error: function (message) {  
  14.         $(".posting").remove();  
  15.         $(".main_con").append("<p style='text-align:center; padding:20px 0;background:#f4031a;color:#fff;'>提交数据失败!</p>");  
  16.        }  
  17.    });  
  18.    function GetJsonData() {  
  19.     var teamdata=[];  
  20.     for(var i=0; i<$(".onjob-lsit tr").length; i++){  
  21.         var teamobj ={  
  22.             "teamRelname":$(".teamRelname").eq(i).text(),   
  23.             "teamTel":$(".teamTel").eq(i).text(),   
  24.             "teamStartDate":$(".teamStartDate").eq(i).text(),   
  25.             "teamEndtDate":$(".teamEndtDate").eq(i).text(),   
  26.             "teamRemark":$(".teamRemark").eq(i).text()  
  27.         };  
  28.         teamdata.push(teamobj);  
  29.     }  
  30.       
  31.     var json = {  
  32.         "onteamName": $(".onteamName").val(),  
  33.         "forteamName": $(".forteamName").val(),  
  34.         "teamList":teamdata  
  35.           
  36.     };  
  37.     return json;  
  38.     }  

转载请注明:一只羊博客 » 前端以json方式提交数据到服务端

分享到:
(7)

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (1)

  1. ie下这个支持的不好,忘记是ie6,7,8哪个了,如果你能把这个的解决方案完善到你的文章里就相对完美了. :eek:

    Eddy2016-06-17 18:07 回复