javascript+C# 前后端连接（二）ajax

蔚落 2022-05-28 03:22 345阅读 0赞

## **一.C\#** ##

#### 1、建立web空项目 ####

文件——新建——项目：Visual C\#——Web——[ASP.NET][] Web应用程序——空  
![这里写图片描述][70]  
![这里写图片描述][70 1]

#### ２、添加web服务 ####

右键项目名称——添加——新建项：web服务  
![这里写图片描述][70 2]  
![这里写图片描述][70 3]  
  看到的界面为：  
![这里写图片描述][70 4]

#### 3、调试 ####

点击工具栏里的浏览器进行调试，可以看到第一个helloword()的运行结果：  
　　![这里写图片描述][70 5]  
  在运行时出现了一个错误：“无法启动程序“[http://localhost:13342][http_localhost_13342]” 操作在当前状态中是非法的”  
  这可能是因为防火墙被修改了，把防火墙改回"使用推荐设置"，再重新打开工程，就运行成功了。参考[VS2017 启动调试出现 无法启动程序“http://localhost:15613” 操作在当前状态中是非法的。 同时附加进程也是错误的解决方法][VS2017 _ _http_localhost_15613_ _]

#### 4、修改配置文件web.config ####

由于Js设置了跨域限制，因此需要进行配置。具体可参考[JavaScript跨域总结与解决办法][JavaScript]和[JavaScript 跨域访问的问题和解决过程][JavaScript 1]。  
  在<configuration></configuration>节点中添加子节点：

<system.webServer>
        <httpProtocol>
          <customHeaders>
            <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>
            <add name="Access-Control-Allow-Headers" value="x-requested-with,content-type"/>
            <add name="Access-Control-Allow-Origin" value="*"/>
          </customHeaders>
        </httpProtocol>
    </system.webServer>

#### 5、自定义配置文件config.xml（可选） ####

由于有时候需要访问一些内其他文件，但这些文件名称或存放路径经常修改，因此可以自定义一个配置文件，需要修改这些文件名或路径时，直接修改配置文件即可，就不需要修改程序里其他信息：  
  假设工程需要读取工程存放路径project\_path，由于每个人存放的位置不一样，因而就需要对这个变量进行修改，工程才能正常运行。  
  （1）在bin目录下创建一个config.xml文件（打开文件夹，在文件夹中新建，工程目录会自动显示它），可做如下编写：

<config>
      <project_path>
        <value>E:\WebApplication1</value>
      </project_path>
    </config>

（2）右键项目名称——添加——新建项：全局应用程序类[Global.asax][]：  
　　![这里写图片描述][70 6]  
  （3）双击新建的Global.asax，在Application\_Start()中读取配置文件信息：

using System.Xml;
    using System.IO;
    
    protected void Application_Start(object sender, EventArgs e)
    { 
           XmlDocument configXml = new XmlDocument();
           string strPath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "bin", "Config.xml");// 上面新建的"config.xml";
           if (File.Exists(strPath))
           { 
               //加载xml文件并且读取文件根节点（每个xml文件有且仅有一个根节点）
               configXml.Load(strPath);
               XmlNode root = configXml.SelectSingleNode("config");
               //project_path
               XmlNodeList project_path = root.SelectNodes("project_path");
               string abc = ((XmlElement)project_path.Item(0)).ChildNodes.Item(0).InnerText;
           }
    }

（4）对于配置文件config.xml来说，文件的内容是随时可变的，属于动态变量。但是对于C\#工程来说，它读取的永远都是config.xml的节点，节点名是不变的，它是静态变量。也即是只要程序运行，Global.asax里读取的值就不会改变，程序里引用的这个对应值不会改变。如果要改变程序里的值，只有停止程序，修改后重新运行才会成功。  
  为了使结构清晰，新建一个类，在类中定义静态变量，作为程序在运行时的变量名。这样，读取配置文件的结构就是：config.xml（可随时修改的配置文件）——Global.asax（读取配置文件的值）——类Config.cs定义值对应的变量名，以供程序使用。config.xml和Config.cs的名字可以修改，Global.asax最好不要修改。  
  因此根据上面的例子，就需要添加一个类Config.cs替代上面的变量abc：右键项目名称——添加——类：  
![这里写图片描述][70 7]  
  在Config.cs里写：

public static string project_path;

然后修改上一步的最后一句为：

//把string abc 改为已经定义好的变量Config.project_path
    Config.project_path = ((XmlElement)project_path.Item(0)).ChildNodes.Item(0).InnerText;

在其他地方需要使用project\_path时直接就使用config.project\_path即可。  
  需要注意的是，引用类时必须是在相同的命名空间下，如果是不同的命名空间，需要使用“using namespace”引用命名空间，或者使用“命名空间.类名.函数名/方法名/变量名”来引用其他命名空间的方法。具体看[C++：\#include和using namespace][C_include_using namespace]

## **二.JS** ##

关于[ajax][]，可以看它的内部函数，就是封装的http连接前后端方法，有关http的传值方法，可以看我的上一篇文章 [javascript+C\# 前后端连接（一）http][javascript_C_ _http]。

#### 1、不传值，直接调用方法 ####

例如，id为hello的button需要调用上面的Helloword()方法，那么：

//url为http://localhost:13342/WebService1.asmx+HelloWorld，前一部分为运行后工程的地址，可看第三步图片地址栏里的地址，后一部分为函数名称
    $("#hello").click(function () { 
        $.ajax({ 
            type: "Post",
            url: "http://localhost:13342/WebService1.asmx/HelloWorld",
            async: false,
            //成功后执行 data为返回值
            success: function (data) { 
                alert(data.documentElement.innerHTML); 
            },
            //失败后执行 err为返回值
            error: function (err) { 
                alert(err);
            }
        });
    });

可以看到返回的data为：  
![这里写图片描述][70 8]

#### 2、使用[json][]传值，字符、字符串、数组、对象等 ####

以一个案例来看如何进行连接：实现一个方法，前端向后端传值test,a,1,\[b,2\]，后端合并值，把结果返回前端。  
  首先，在JS中传值：

然后，把WebService1.asmx.cs里的第16句\[System.Web.Script.Services.ScriptService\]取消注释，如图：  
　　![这里写图片描述][70 9]

#### 3、后端使用一个函数执行前端所有方法 ####

每个方法都写成单独的类或函数，然后用swich case根据前端传来的判定值选择调用的函数方法。依旧是以这个案例来说明：实现一个方法，前端向后端传值a,1,\[b,2\]，后端合并值，把结果返回前端。  
  首先，依旧来看JS中的写法：

可以看到，这里的js中注释了contentType，这时因为在之前的data基础上，外部增加了一层jsonwebtest，它不是json格式，单引号和双引号写反了，如果调换以下就不用注释类型了。还有，在成功后返回的值中，data即为返回值，后端resultjson是什么，前端的data即是什么。因为ajax在传送和接收时都解析过json了。

{ "jsonwebtest": "{'functionname':'test','a':'a','b':'b','c':'v'}"} //正确的json
    //解析后的json
    { 
        "jsonwebtest": "{'functionname':'test','a':'a','b':'b','c':'c'}"
    }
    
    { 'jsonwebtest': '{"functionname":"test","a":"a","b":"b","c":"c"}'} //错误的格式，外部必须是双引号

然后，新建一个类，在类里写好方法：

//引用json，其实只需要第二个引用
    using Newtonsoft.Json;  
    using Newtonsoft.Json.Linq;  
      
    namespace WebApplication2
    { 
        public class Class1
        { 
            public string Add(JObject jo)
            { 
                string a = jo["a"].ToString();
                string b = jo["b"].ToString();
                string array = jo["c"].ToString();
                string[] c = array.Split(',');
                string retxt = a + b + c[0] + c[1]; //a1b2 
                //这里返回的是什么，前端的data就是什么
                //如果是字符串a1b2，前端data就是a1b2，如果是数组[a,b]，那么data就是[a,b]
                return retxt;
            }
        }
    }

最后，在C\#中添加一个\[WebMethod\]，函数设为HelloWorld2。

//引用json
    using Newtonsoft.Json;
    using Newtonsoft.Json.Linq;
    
    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。 不需要取消注释。 //[System.Web.Script.Services.ScriptService]
    		
    		[WebMethod]
            //参数名必须与前端一致
            public void HelloWorld2(string jsonwebtest)
            { 
    	        //jo即是{"functionname":"test","a":"' + a + '","b":"' + b + '","c":"' + c.toString() + '"}
                JObject jo = (JObject)JsonConvert.DeserializeObject(jsonwebtest);
                //解析出functionname对应的值后，根据这个值来调用相应的函数
                string functionname = jo["functionname"].ToString();
                //函数的返回值，可以转object的任何类型，需要返回数组也可以返回数组等
                string resultjson = "";
                switch (functionname)
                { 
                    case "test":
                        Class1 cl = new Class1();
                        resultjson = cl.Add(jo);
                        break;
                    default:
                        break;
                }
                //将函数的返回值序列化为json对象，前端自动解json
                object JSONObj = JsonConvert.SerializeObject(resultjson);
                //将json对象写到http响应流，传到前端
                Context.Response.Write(JSONObj);
            }

C\#页面显示在WebService1.asmx.cs界面，然后运行，调用这个JS函数再运行html，即可看到弹出的结果。

[ASP.NET]: http://ASP.NET
[70]: /images/20220528/042ca49c0aba4d8fad3490efc9e900ac.png
[70 1]: /images/20220528/d1f609ea95dc4b43b078357ff81be1ad.png
[70 2]: /images/20220528/1c468e581c604256a423ec3437cd954d.png
[70 3]: /images/20220528/99b64f47b8dc471ab7f9878938626be5.png
[70 4]: /images/20220528/c35eb4e778f74d6d8335ca3e7485ae05.png
[70 5]: /images/20220528/14f61f6321a846a0b2f83a3675462a5b.png
[http_localhost_13342]: http://localhost:13342
[VS2017 _ _http_localhost_15613_ _]: http://www.cnblogs.com/wuchunj/p/7839359.html
[JavaScript]: http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html#m0
[JavaScript 1]: https://www.cnblogs.com/PurpleTide/archive/2011/11/06/2238293.html
[Global.asax]: https://msdn.microsoft.com/en-us/library/1xaas8a2%28v=vs.71%29.aspx
[70 6]: /images/20220528/1f41ca0903fa4bfbb2deb6778b240716.png
[70 7]: /images/20220528/e090beae91554fa886727495b82ec655.png
[C_include_using namespace]: https://blog.csdn.net/u013719339/article/details/80221899
[ajax]: http://www.w3school.com.cn/jquery/ajax_ajax.asp
[javascript_C_ _http]: https://blog.csdn.net/u013719339/article/details/79673111
[70 8]: /images/20220528/51b8b3b26933453c82e25099c8cc3e7e.png
[json]: https://www.cnblogs.com/dongfangshenhua/p/6858863.html
[70 9]: /images/20220528/72f6d7b8136d45e9bc7830813f9de029.png