jQuery Ajax 调用 ASP.NET WebServices + (POST)->JSON 数据传递，一种开发高效的模式

最新推荐文章于 2017-04-18 12:25:05 发布

Kimi

最新推荐文章于 2017-04-18 12:25:05 发布

阅读量2.5k

点赞数

分类专栏： IT 文章标签： asp.net jquery json ajax webservice function

本文链接：https://blog.csdn.net/kimiqiu/article/details/6284199

版权

IT 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

jQuery是目前前端页面最好的Javascript"封装"模式，ASP.NET WebServices是微软Web项目高效简洁的模式，2者结合的开发Web程序是目前主流高效的一种开发模式，不瞎掰了，进入Demo演示：

#注意：本文举例的传输数据类型为 JSON (轻量级的数据交换格式)

#此方式避免了在后端ASP.NET处理时需要序列化处理JSON字符串的麻烦，丢给ASP.NET（WebServices）来处理吧，开发效率更高些。

【js准备】

1.从 www.jquery.com 下载jQuery的Javascrpit封装包文件： jquery-1.5.1.min.js

2.创建jquery.extend.ajax.json.js文件，代码如下：

$.ajaxWebService = function (url, dataMap, fnBefore, fnSuccess,fnError) { $.ajax({ type: "POST", //访问WebService使用Post方式请求 contentType: "application/json", //WebService 返回Json类型 url: url, //调用WebService的地址和方法名称组合 ---- *.asmx/方法名 data: dataMap, //要提交传递的参数，格式为 data: "{paraName1:paraValue1 , paraName2:paraValue2 , ......}" dataType: "json", //传输的数据类型 beforeSend: fnBefore, //返回结果前的执行的函数，例如 loading 或 waiting 视图 success: fnSuccess, //返回后，页面执行结果的函数 error: fnError //返回错误后，页面执行的函数 }); }

#以上2个js文件保存到Web项目 ../Script/ 目录下

【页面】

aspx/html 文件头省略

<head runat="server">
    <title></title>
    <script src="Script/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="Script/jquery.extend.ajax.json.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#Button1").click(function () {
                var valueStr = "{value1:" + "'" + $("#Text1").attr("value") + "'}";
                alert(valueStr);
                $.ajaxWebService(

"WebService1.asmx/TxMsg",

                valueStr,
                function () { $('#Text2').val("loading..."); },
                function (result) { $('#Text2').val(result.d); },
                function (result, status) { if (status == 'error') { alert(status); } }

                );
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="Text1" type="text" value="0|U20111|10|||20110325|20110325|TSTER|0|TESTER|||" /><br />
        <br />
        <input id="Button1" type="button" value="button" /><br />
        <br />
        <input id="Text2" type="text" />
    </div>
    </form>
</body>
</html>

【WebServices文件：WebService1.asmx】

WebServices1.asmx.cs 代码：

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; namespace WebTest { /// <summary> /// WebService1 的摘要说明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.ComponentModel.ToolboxItem(false)] // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。 [System.Web.Script.Services.ScriptService] public class WebService1 : System.Web.Services.WebService { [WebMethod] public string TxMsg(string value1) { string result = null; if (value1.Contains("|")) { string[] array_Value = value1.Split('|'); result = "255" + "|" + array_Value[1] + "|" + "20" + "|||" + array_Value[5] + "|" + array_Value[6] + "|" + array_Value[7] + "|" + array_Value[8] + "|" + array_Value[9] + "|||"; } //数据库处理代码 .... 省略 return result; } } }

OK，运行测试一下。很简单，页面使用jQuery Ajax带JSON参数调用ASP.NET WebServices，返回一个字符串的处理。

Kimi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery Ajax 调用 ASP.NET WebServices + (POST)->JSON 数据传递，一种开发高效的模式

【jQuery Ajax 调用 ASP.NET WebServices + (POST)->JSON 数据传递，一种开发高效的模式】jQuery是目前前端页面最好的Javascript"封装"模式，ASP.NET WebServices是微软Web项目高效简洁的模式，2者结合的开发Web程序是目前主流高效的一种开发模式，不瞎掰了，进入Demo演示：#注意：本文举例的传输数据类型为 JSON (轻量级的数据交换格式)#此方式避免了在后端ASP.NET处理时需要序列化处理JSON字符串的麻烦，丢给A
复制链接

扫一扫