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

时间：2022-06-25 17:27:49 编辑：袖梨来源：一聚教程网

大概需求就是前端要把数据组装成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;
    }

推荐专题

最新下载

热门教程

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程