ajax中的json字符串的组织与传递方法

最新推荐文章于 2023-05-17 17:42:55 发布

原创最新推荐文章于 2023-05-17 17:42:55 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#json #ajax #easyui

asp.net 专栏收录该内容

155 篇文章

订阅专栏

本文介绍了如何在前端使用easyUI组件获取表单数据，组织成JSON字符串，并通过AJAX调用WebService进行数据传输，包括camid、名称等参数的处理和传递技巧。

ajax中的json字符串的组织与传递方法：
一、html元素与easyUI元素的取值方法：

var cameraNameStr = $("#cameraName").textbox('getValue');
        var IPAddressStr = $("#IPAddress").textbox('getValue');
        var portStr = $("#port").textbox('getValue');
        var UserNameStr = $("#UserName").textbox('getValue');
        var passwordStr = $("#Password").textbox('getValue');
        var modelStrTemp = $("#model").combobox('getText');
        var codecStrTemp = $("#codec").combobox('getText');
        var inputModeStr = $("#inputMode").combobox('getText');
		var inputChannelStr = $("#inputChannel").textbox('getValue');
		var validStr = $("#valid")[0].checked ? 1 : 0;
		var camid = cameraId + 1;

二、前端页面中组织json字符串：注意此处的json字符串省略了行的定义，也就是说这只定义了一行，也就是第一行，如果是多行，则要按照有行的定义方法。如：{h:[{‘a’:‘1’,‘b’:‘2’}]},这里省略行定义主要是配合webservice接口中取值的方法。

var jsonString = '{"camid": ' + camid + ',"camname": "' + cameraNameStr + '", "camip": "' + IPAddressStr + '", "camport": "' + portStr + '", "camuser": "' + UserNameStr + '", "campassword": "' + passwordStr + '", "cammodel": ' + modelStr + ', "camcodec": ' + codecStr + ', "inputmode": "' + inputModeStr + '", "inputchannel": ' + inputChannelStr + ', "camvalid": ' + validStr + '}';

三、ajax调用WEBMETHOD方法并传递json字符串的方法：注意json字符串以text方式传递给后端WEBMETHOD方法时要设置：dataType:“text”，还有一种方式就是以json对象方式传给后端方法，此处暂不讲解。

 function save() {
		var jg;
        var cameraNameStr = $("#cameraName").textbox('getValue');
        var IPAddressStr = $("#IPAddress").textbox('getValue');
        var portStr = $("#port").textbox('getValue');
        var UserNameStr = $("#UserName").textbox('getValue');
        var passwordStr = $("#Password").textbox('getValue');
        var modelStrTemp = $("#model").combobox('getText');
		var modelStr = 0;
		switch (modelStrTemp) {
			case "--":
				modelStr = 0;
				break;
            case "海康":
                modelStr = 1;
				break;
            case "大华":
                modelStr = 2;
				break;
            case "宇视科技":
                modelStr = 3;
				break;
            case "华安":
                modelStr = 4;
				break;
            case "信路威":
                modelStr = 5;
				break;
            case "测试":
                modelStr = 6;
				break;
		}


        var codecStrTemp = $("#codec").combobox('getText');
		var codecStr = 0;
        switch (codecStrTemp) {
            case "主码流":
                codecStr = 0;
                break;
            case "辅码流":
                codecStr = 1;
                break;
        }
      
        var inputModeStr = $("#inputMode").combobox('getText');
		var inputChannelStr = $("#inputChannel").textbox('getValue');
		var validStr = $("#valid")[0].checked ? 1 : 0;
        
		var camid = cameraId + 1;
       
		var jsonString = '{"camid": ' + camid + ',"camname": "' + cameraNameStr + '", "camip": "' + IPAddressStr + '", "camport": "' + portStr + '", "camuser": "' + UserNameStr + '", "campassword": "' + passwordStr + '", "cammodel": ' + modelStr + ', "camcodec": ' + codecStr + ', "inputmode": "' + inputModeStr + '", "inputchannel": ' + inputChannelStr + ', "camvalid": ' + validStr + '}';
		console.log(jsonString);
		

        $.ajax({
            type: "post",
            url: "cameraconfig.aspx/SendDataToWebservice",//格式为"文件名(含后缀)/方法名"
            contentType: "application/json; charset=utf-8",//发送信息至服务器时内容编码类型
            dataType: "text",//服务器返回的数据类型
            data: "{URL:'" + camconfigIp + "',camObj: '" + jsonString + "'}",
            async: false,
			success: function (data) {
                var hh = JSON.parse(data);
				var jg = JSON.parse(hh.d)
                $.messager.alert('信息提示', '数据保存成功!', "info", function () {
                    parent.closeCameraConfigWin();
                });
               
            }, error: function () {
                alert("数据获取失败!");
            }
        });
        return jg;
	}