javascript+C# 前后端连接（一）http

怼烎@ 2022-05-29 12:37 179阅读 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");
               //读取config.xml文件里的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** ##

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

例如，需要调用上面的Helloword()方法，那么在需要的地方写上：

//url为http://localhost:13342/WebService1.asmx+HelloWorld，前一部分为运行后工程的地址，可看第三步图片地址栏里的地址，后一部分为函数名称
    var URL = "http://localhost:13342/WebService1.asmx/HelloWorld";
        var xmlhttp = new createXMLHTTP();
        xmlhttp.open("POST", URL, false);
        xmlhttp.onreadystatechange = function () { 
            //响应成功
            if (xmlhttp.readyState == 4) { 
                alert("helloword!");
            }
        };
        xmlhttp.send(null);

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

在js和c\#中传值都是使用json，需要先引用Newtonsoft.Json.dll，我的电脑中路径为C:\\Program Files\\Microsoft SDKs\\[Azure.NET][] SDK\\v2.9\\bin\\plugins\\Diagnostics\\Newtonsoft.Json.dll  
  右键引用——添加引用——浏览——找到该.dll文件并在前方方框内打勾。  
　　 ![这里写图片描述][70 8]  
  以一个案例来看如何进行连接：实现一个方法，前端向后端传值1,2,\[3,4\]，后端合并值，把结果返回前端。  
  首先，在JS中传值：

然后，在C\#中新建一个类，类中写合并值的方法：

//引用json
    using Newtonsoft.Json;
    using Newtonsoft.Json.Linq;
    
    namespace WebApplication1
    { 
        public class Class1
        { 
            public string Add(string json)
            { 
                //解json并将所有值放入数组中
                JObject jsonDB = new JObject();
                jsonDB = (JObject)JsonConvert.DeserializeObject(json);
                string a = jsonDB["a"].ToString();
                string b = jsonDB["b"].ToString();
                string array = jsonDB["c"].ToString();
                string[] c = array.Split(',');
                string retxt = a + b + c[0] + c[1];
                return retxt;
            }
        }
    }

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

//引用json
    using Newtonsoft.Json;
    using Newtonsoft.Json.Linq;
    
    		[WebMethod]
            public void HelloWorld2()
            { 
                //接收前端传的值
                string jsonwebtext = HttpContext.Current.Request.QueryString["JsontoLogic"];
                JObject jsonWeb = new JObject();
                jsonWeb = (JObject)JsonConvert.DeserializeObject(jsonwebtext);
                //定义str，获取functionname对应的值test，根据test，选择调用的方法
                //所有的函数都写在类中，然后使用switch语句，根据functionname对应的值来选择调用的方法，则只需要一个[WebMethod]即可
                string str = jsonWeb["functionname"].ToString();
                string resultjson = null;
                switch (str)
                { 
                    case "test":
                        Class1 cl = new Class1();
                        resultjson = cl.Add(jsonwebtext);
                        break;
                    default:
                        break;
                }
                //向前端返回值
                HttpContext.Current.Response.Write(resultjson);
            }

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

#### 3、传递文件图片等 ####

参考[WebUploader][]、[javascript+C\#本地大文件上传到服务器方法（WebUploader）][javascript_C_WebUploader]、[JS+WebService 大文件分片上传代码及解析][JS_WebService]。

[ASP.NET]: http://ASP.NET
[70]: /images/20220529/7834f207c2dc4422b214d54c51915b63.png
[70 1]: /images/20220529/3feca46844514d418e01a50553000879.png
[70 2]: /images/20220529/c73ce35245624d05af7308b4dd66dc7f.png
[70 3]: /images/20220529/b349417df4d542cfa3af241a2db4f421.png
[70 4]: /images/20220529/4ca3990f5d6f4dbd8766932feac50054.png
[70 5]: /images/20220529/4f0a35c48a0146b5b5409df529365dd7.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/20220529/551f89f3554e44e4bf5a2c0593f30893.png
[70 7]: /images/20220529/4fdbf341502f4a94aef4351b47377b74.png
[C_include_using namespace]: https://blog.csdn.net/u013719339/article/details/80221899
[json]: https://www.cnblogs.com/dongfangshenhua/p/6858863.html
[Azure.NET]: http://Azure.NET
[70 8]: /images/20220529/66507afcecc34b3c8164c597cc0a84b0.png
[WebUploader]: https://github.com/fex-team/webuploader
[javascript_C_WebUploader]: https://blog.csdn.net/u013719339/article/details/79472676
[JS_WebService]: https://blog.csdn.net/wangbingqian_110/article/details/79463031