后台返回json数据给前台和前台解析json数据（总结）
一般来说web开发中，前台采用json数据提交给后台，后台处理数据以后返回json数据给前台，前台解析json，显示数据。

总而言之，前后台直接交换的数据格式最常用的非json数据无疑了。

这里就总结一些json数据的前后台处理方式。
1.JSON数据
JSON(JavaScript Object Notation, JS 对象简谱)
是一种轻量级的数据交换格式，比xml更轻巧（由于 JSON 所使用的字符要比 XML 少得多，可以大大得节约传输数据所占用的带宽）。
json是javascript原生格式，就是说在javascript中处理json数据，需要引用其他API或工具包。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
只需要记住！

Json是一种文本字符串！被存储在responseText属性中，而读取json数据可以使用javascript的eval函数来解析json。
2.json规则：
在 JS 语言中，一切都是对象，对象是一个无序的 “键/值” 对集合。

因此，任何支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型：

•	对象表示为键值对.

•	数据由逗号分隔.

•	花括号{}保存对象.

•	方括号[]保存数组.
键/值对组合中的键名写在前面并用双引号 “” 包裹，使用冒号 : 分隔，然后紧接着值：
{"firstName": "Json"}

这很容易理解，等价于这条 JavaScript 语句：
{firstName : "Json"}

对象在 JS 中是使用花括号包裹 {} 起来的内容，数据结构为 {key1：value1, key2：value2, …} 的键值对结构。

在面向对象的语言中，key 为对象的属性，value 为对应的值。


键名可以使用整数和字符串来表示，值的类型可以是任意类型。

数组在 JS 中是方括号 [] 包裹起来的内容，数据结构为 [“java”, “javascript”, “vb”, …] 的索引结构。
在 JS 中，数组是一种比较特殊的数据类型，它也可以像对象那样使用键值对，但还是索引使用得多。同样，键名可以使用整数和字符串来表示，值的类型可以是任意类型。
3.JSON 与 JS 对象的关系：
很多人搞不清楚 JSON 和 Js 对象的关系，甚至连谁是谁都不清楚。其实，可以这么理解：

JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。

如：
var obj = {a: 'Hello', b: 'World'};    //这是一个对象，注意键名也是可以使用引号包裹的
var json = '{"a": "Hello", "b": "World"}';  //这是一个 JSON 字符串，本质是一个字符串

4.后台返回json数据
一般来说，使用JsonObject来将Java类型数据转换成Json类型，首先要下载该库相关的jar包，下载地址如下：
json-jar包下载
JsonObject的使用：

后台controller部分代码:
JSONObject object = new JSONObject();  //创建Json对象
object.put("username", "张三");         //设置Json对象的属性
object.put("password", "123456");
System.out.println(object.toString());  //调用toString方法将json对象转换成json字符串

//把json数据返回给浏览器：
PrintWriter out = cu.getWriterOut(response);
out.print(object.toString());
//或者
response.getWriter().write(jsonObject.toString());


5.在JavaScript代码中接收Json数据：
假设result为浏览器得到的json数据，可以使用以下js代码可以将json对象转换为字符串。
比如：
通过$.get从后台获取了一段json串{“id”:“1”,“name”:“ww”}，然后要拿到这里面的id和name值：
注意！注意！注意！

如果你直接这么写！
$.get(url,
     function(data) {
       alert("ID:" + data.id + "\nName:" + data.name);
     });

直接这样写的话，界面会alert提示undefined，因为没能正确解析返回的字符串。
图示：


解决方案：
1、	需要用eval()函数
将返回的串转化成可用的strig串，eval(data)，但是因为原串里面是以{}开始和结束的，会被认为是可执行方法，因此需要加上()包围起来,最终形成：
var jsonobj= eval('(' + data + ')');  // 把JSON字符串解析为javascript对象

然后再
alert("ID:" + jsonobj.id + "\nName:" + jsonobj.name);

各种正常的按key取值，就能正常显示了。
2、获取的时候就直接表示返回的是json格式，用$.getJSON代替$.get，其他代码不变，也能正常获取。
也可以直接获取json对象的属性，如下：console.log(result.username);
前端js代码:
$.ajax({
url: url,
type: "POST",
data: parameters,
dataType:"json",
async: false,
success: function(result){
var newData = JSON.stringify(result);    //将json对象转换为字符串
newData = eval("("+newData+")");   /解析json

var annualDays = newData.annualDays;
var entryDate = newData.entryDate;

$("input[name='extendDataFormInfo.value(fd_shengyu_nianjia)']").val(annualDays);
$("input[name='extendDataFormInfo.value(fd_ruzhi_date)']").val(entryDate);

}});


ps: 注意注释中的代码，如果少了这一句，那么直接alert(result);得到的结果会是

所以在这里stringfy()的作用是用于从一个对象解析出字符串

加上了var newData = JSON.stringify(result);这句，然后你再alert(newData);

得到的就会是你想要的结果，如下:


另外：

如果返回的json数据格式不是很规范的解决办法：
判断后台返回的数据格式是否字符串，是则转，不是则不转？
  var $obj = (typeof data.content == 'string') ? JSON.parse(data.content):data.content

总结：

前台发送请求，并且设置数据为json格式‘

    $.ajax({
    url:"selectByid.",
    datatype:'json',
    data:{id:id}, // 发送数据 


数据回调函数

success:function(data){
alert(data);
var json = eval("("+data+")");//将json类型字符串转换为json对象
alert("hjf"+json.name);


给对应的input赋值：

$("#id").val(json.id),
$("#name").val(json.name),
$("#age").val(json.age);


后台代码：返回json数据

response.getWriter().print(str);    //将数据返回前台ajax

6.前端ajax接不到json解决？
在前台：
async:false,                //加上这个属性就好了

7.返回的json字符串中有转义符解决？
比如：
"result":"{\"id\":\"60\",\"qid\":\"1\",\"bazi\":\"baiz\",\"shenxiao\":\"\",\"xingzuo\":\"\",\"wuge\":\"\",\"jianyi\":\"\",\}"

这样我们我们使用JSON.parse(result) ，直接转化为json的话是会报错的。
解决方法：

我们先把转义符用正则表达式去掉，
   var string = result.replace("/\\","");
   var getDataArray = JSON.parse(string)

这样就OK了，不过要注意有时候也是需要指定返回数据类型的

dataType:“json”
8.使用其他的json依赖包方式：
引入阿里巴巴的json依赖包：
    <dependency>
     <groupId>com.alibaba</groupId>
     <artifactId>fastjson</artifactId>
     <version>1.2.9</version>
    </dependency>

模拟后台：
    String params="{\"channelCode\":\"bbb\",\"accountNo\":\"121300000932\",\"message\":\"字符信息解密成功\",\"status\":\"1\"}";
    JSONObject pa=JSONObject.parseObject(params);
    System.out.println(pa.getString("message"));

结果：


或者：

引入net.sf.json-lib依赖包：
    <dependency>
      <groupId>net.sf.json-lib</groupId>
      <artifactId>json-lib</artifactId>
      <version>2.4</version>		 
      <classifier>jdk15</classifier>
    </dependency>

后台：
String params="{\"channelCode\":\"ccy\",\"accountNo\":\"121300000932\",\"message\":\"字符信息解密成功\",\"status\":\"1\"}";
JSONObject pa=JSONObject.fromObject(params);
String accountNo=pa.getString("accountNo");
System.out.println(accountNo);

结果：


9.后台对象转换json数据返回给前台
List集合转换成json代码：
　　List list = new ArrayList();
　　list.add( "first" );
　　list.add( "second" );
　　JSONArray jsonArray2 = JSONArray.fromObject( list );

Map集合转换成json代码：
　  Map map = new HashMap();
　　map.put("name", "json");
　　map.put("bool", Boolean.TRUE);
　　map.put("int", new Integer(1));
　　map.put("arr", new String[] { "a", "b" });
　　map.put("func", "function(i){ return this.arr[i]; }");
　　JSONObject json = JSONObject.fromObject(map);

或者在项目中加入引入JSON-lib包，JSON-lib包同时依赖于以下的JAR包：

下载地址。
  1.commons-lang.jar
  2.commons-beanutils.jar
  3.commons-collections.jar
  4.commons-logging.jar 
  5.ezmorph.jar
  6.json-lib-2.2.2-jdk15.jar

用法同上
　　JSONObject jsonObject = JSONObject.fromObject(message);
　　getResponse().getWriter().write(jsonObject.toString());

当把数据转为json后，用如上的方法发送到客户端。前端就可以取得json数据了。（可以参考最下面的实例）
10.后台返回数据给前台，json中文乱码解决方法
在实际运用场景中，当前台发起请求后，我们需要从后台返回数据给前台，这时，如果返回的数据中包含中文，则经常会出现在后台查询出来都是好好，但是传输回去就莫名的乱码了，而且即使在 web.xml 中进行编码过滤了，但还是乱码。
解决办法：

只需要在 spring-mvc.xml 配置文件中配置一次就好，省去了我们重复写的麻烦，配置内容如下：
<!--自定义消息转换器的编码,解决后台传输json回前台时，中文乱码问题-->
    <mvc:annotation-driven >
        <mvc:message-converters register-defaults="true">
            <bean class="org.springframework.http.converter.StringHttpMessageConverter" >
                <property name = "supportedMediaTypes">
                    <list>
                        <value>application/json;charset=utf-8</value>
                        <value>text/html;charset=utf-8</value>
                        <!-- application 可以在任意 form 表单里面 enctype 属性默认找到 -->
                        <value>application/x-www-form-urlencoded</value>
                    </list>
                </property>
            </bean>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter" ></bean>
        </mvc:message-converters>
    </mvc:annotation-driven>

加上这段配置，保存重新运行，再次访问，会发现，原先的中文乱码都已经正常显示了。
方法二：在后台的方法映射添加：

@RequestMapping(value="/getphone",produces = “text/plain;charset=utf-8”)

11.Spring MVC返回json数据的方式
1. 采用@ResponseBody注解
@ResponseBody 注解的作用是:

将controller的方法返回的对象通过适当的转换器转换为指定的格式之后，写入到response对象的body区，通常用来返回JSON数据或者是XML数据，需要注意的呢，在使用此注解之后不会再走试图处理器，而是直接将数据写入到输入流中，他的效果等同于通过response对象输出指定格式的数据。

使用举例：


使用@ResponseBody 注解返回响应体 直接将返回值序列化json

优点：不需要自己再处理
再举例：
RequestMapping("/login")
　　@ResponseBody
　　public User login(User user){
　　　　return user;
　　}

使用@ResponseBody 注解返回响应体 直接将返回值序列化json。
User字段：userName pwd，那么在前台接收到的数据为：’{“userName”:“xxx”,“pwd”:“xxx”}’，效果等同于如下代码：
@RequestMapping("/login")
public void login(User user, HttpServletResponse response){
　　　response.getWriter.write(JSONObject.fromObject(user).toString());
}


需要在springmvc的配置文件xml中添加：
<mvc:annotation-driven/>  

2. 采用工具类，进行json格式转换带回
JSON-lib包是一个beans,collections,maps,java arrays 和XML和JSON互相转换的包。在本例中，我们将使用JSONObject类创建JSONObject对象，然后我们打印这些对象的值。为了使用JSONObject对象，我们要引入"net.sf.json"包。为了给对象添加元素，我们要使用put()方法。
要使程序可以运行必须引入JSON-lib包，JSON-lib包同时依赖于以下的JAR包：
commons-lang.jar
commons-beanutils.jar
commons-collections.jar
commons-logging.jar 
ezmorph.jar
json-lib-2.2.2-jdk15.jar

效果：
工具类：

ResponseUtil.java
package com.zout.utils;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

/**
 *@class_name：ResponseUtil  
 *@param: EasyUi-响应工具类
 *@return: 返回字符串格式数据、result是JSONObject对象（json对象）
 *@author:Zoutao
 *@createtime:2018年3月8日
 */
public class ResponseUtil {
	public static void write(HttpServletResponse response, Object result)
			throws Exception {
		response.setContentType("text/html;charset=utf-8");
		response.addHeader("Access-Control-Allow-Origin", "*");
		PrintWriter out = response.getWriter();
		out.println(result.toString());
		System.out.println("带回的json字符串为："+result.toString()+"类型为："+result.getClass().getName());
		out.flush();
		out.close();
	}
	
	public static void main(String[] args) throws Exception {
		/*在web运用控制层中调用如下：*/
		JSONObject result = new JSONObject(); //创建json对象
		JSONArray jsonArray = JSONArray.fromObject("name:zhangsan"); //字符串转为json数组
		result.put("rows", jsonArray);  //放入json数组中，并起个名字
		HttpServletResponse response = null; //jsp的response对象
		ResponseUtil.write(response, result); //result写入response带回前台，jsp按名字拿取。
	}
}


后台具体调用:
	JSONObject result = new JSONObject();
			if (resultTotal > 0) {		//处理结果
				System.out.println("操作成功。");
				result.put("success",true)
				result.put("message","操作成功"); //消息语句
			} else {
				System.out.println("操作失败。");
				result.put("success", false);			
				result.put("message","操作失败");
			}
			ResponseUtil.write(response,result); //带回字符串+状态码
			return null;

图：


后台已经通过工具类封装为json字符串了，使用response带回需要的数据，使用result带回状态字符串或状态码。
前台：

这是当成返回一个json字符串，然后直接采取字符串截取的方式，取出消息语句message等消息。


这是另外一种写法：就是解析传回来的json字符串我js的对象，然后按照key/value的取值。
  function (data) {
          var data=eval("("+data+")");  //解析json
         //alert(data.message)
            $.messager.show({
              title:'消息',
              msg:data.message,  //按key取值
              timeout:1000,
              showType:'slide',
              height:120,
             width:200
     });
 });

推荐这种方式。

效果图：



以上都是后台返回json数据给前台和前台解析json数据的一些总结，还有json数据的封装，工具类的使用等等，东西有点复杂有点多，挑选自己需要的地方即可。
另外的一些常用的web开发json：
Json–Java数据类型对照表（映射）表

1课程计划

1、前台系统搭建

2、商城首页展示

3、Cms系统的实现

        a) 内容分类管理

        b) 内容管理

4.前台内容动态展示

2商城首页展示

系统架构：



页面位置：



2.1工程搭建

E3-portal-web(war)

可以参考e3-manager-web工程搭建







复制pom文件改tomcat端口，配置文件（删除图片服务器配置文件，清空resource.properties）



修改spring-mvc配置文件包名防止依赖时冲突



创建包 cn.e3mall.portal.controller

配置/全部拦截时加入(否则删除)：



删除上传等配置如下：



2.2功能分析

复制ec-manager-web web.xml

配置修改配置工程名、视图解析器名为ec-manager-portal





复制页面到工程下：



请求的url：/index

Web.xml中的欢迎页配置：





http://localhost:8082/index.html

参数：没有

返回值：String 逻辑视图


			
@Controller

			
public class IndexController {

			
 

			
      @RequestMapping("/index")

			
      public String showIndex() {

			
            return "index";

			
      }

			
}
			
		
 



3首页动态展示分析

内容信息要从数据库中获得

3.1动态展示分析

1.内容需要进行分类

2.分类下有子分类，需要动态管理。

3.分类下有内容列表

4.单点的内容信息

       a) 有图片

       b) 有链接

       c) 有标题

       d) 有价格

       e) 包含大文本类型，可以作为公告

需要一个内容分类表和一个内容表。内容分类和内容表是一对多的关系。

 

内容分类表，需要存储树形结构的数据。

内容分类表：tb_content_category



内容表：tb_content



需要有后台来维护内容信息。Cms系统。

 

需要创建一个内容服务系统。可以参考e3-manager创建。

E3-content：聚合工程打包方式pom

|--e3-content-interface jar

|--e3-content-Service  war

 

4内容服务系统创建

4.1工程搭建

可以参考e3-manager工程搭建。















4.2E3-content

4.2.1Pom文件


			
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

			
      xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

			
      <modelVersion>4.0.0</modelVersion>

			
      <parent>

			
            <groupId>cn.e3mall</groupId>

			
            <artifactId>e3-parent</artifactId>

			
            <version>0.0.1-SNAPSHOT</version>

			
      </parent>

			
      <groupId>cn.e3mall</groupId>

			
      <artifactId>e3-content</artifactId>

			
      <version>0.0.1-SNAPSHOT</version>

			
      <packaging>pom</packaging>

			
      <dependencies>

			
            <dependency>

			
                  <groupId>cn.e3mall</groupId>

			
                  <artifactId>e3-common</artifactId>

			
                  <version>0.0.1-SNAPSHOT</version>

			
            </dependency>

			
      </dependencies>

			
      <!-- 配置tomcat插件 -->

			
      <build>

			
            <plugins>

			
                  <plugin>

			
                        <groupId>org.apache.tomcat.maven</groupId>

			
                        <artifactId>tomcat7-maven-plugin</artifactId>

			
                        <configuration>

			
                              <port>8083</port>

			
                              <path>/</path>

			
                        </configuration>

			
                  </plugin>

			
            </plugins>

			
      </build>

			
</project>
			
		
 

4.3 e3-content-interface

4.3.1 Pom文件


			
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

			
      xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

			
      <modelVersion>4.0.0</modelVersion>

			
      <parent>

			
            <groupId>cn.e3mall</groupId>

			
            <artifactId>e3-content</artifactId>

			
            <version>0.0.1-SNAPSHOT</version>

			
      </parent>

			
      <artifactId>e3-content-interface</artifactId>

			
      <dependencies>

			
            <dependency>

			
                  <groupId>cn.e3mall</groupId>

			
                  <artifactId>e3-manager-pojo</artifactId>

			
                  <version>0.0.1-SNAPSHOT</version>

			
            </dependency>

			
      </dependencies>

			
</project>
			
		
 

4.4 e3-content-service

4.4.1 Pom文件


			
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

			
      xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

			
      <modelVersion>4.0.0</modelVersion>

			
      <parent>

			
            <groupId>cn.e3mall</groupId>

			
            <artifactId>e3-content</artifactId>

			
            <version>0.0.1-SNAPSHOT</version>

			
      </parent>

			
      <artifactId>e3-content-service</artifactId>

			
      <packaging>war</packaging>

			
      <dependencies>

			
            <dependency>

			
                  <groupId>cn.e3mall</groupId>

			
                  <artifactId>e3-manager-dao</artifactId>

			
                  <version>0.0.1-SNAPSHOT</version>

			
            </dependency>

			
            <dependency>

			
                  <groupId>cn.e3mall</groupId>

			
                  <artifactId>e3-content-interface</artifactId>

			
                  <version>0.0.1-SNAPSHOT</version>

			
            </dependency>

			
            <!-- spring的依赖 -->

			
            <!-- Spring -->

			
            <dependency>

			
                  <groupId>org.springframework</groupId>

			
                  <artifactId>spring-context</artifactId>

			
            </dependency>

			
            <dependency>

			
                  <groupId>org.springframework</groupId>

			
                  <artifactId>spring-beans</artifactId>

			
            </dependency>

			
            <dependency>

			
                  <groupId>org.springframework</groupId>

			
                  <artifactId>spring-webmvc</artifactId>

			
            </dependency>

			
            <dependency>

			
                  <groupId>org.springframework</groupId>

			
                  <artifactId>spring-jdbc</artifactId>

			
            </dependency>

			
            <dependency>

			
                  <groupId>org.springframework</groupId>

			
                  <artifactId>spring-aspects</artifactId>

			
            </dependency>

			
            <dependency>

			
                  <groupId>org.springframework</groupId>

			
                  <artifactId>spring-jms</artifactId>

			
            </dependency>

			
            <dependency>

			
                  <groupId>org.springframework</groupId>

			
                  <artifactId>spring-context-support</artifactId>

			
            </dependency>

			
            <!-- dubbo相关 -->

			
            <dependency>

			
                  <groupId>com.alibaba</groupId>

			
                  <artifactId>dubbo</artifactId>

			
                  <!-- 排除依赖 -->

			
                  <exclusions>

			
                        <exclusion>

			
                              <groupId>org.springframework</groupId>

			
                              <artifactId>spring</artifactId>

			
                        </exclusion>

			
                        <exclusion>

			
                              <groupId>org.jboss.netty</groupId>

			
                              <artifactId>netty</artifactId>

			
                        </exclusion>

			
                  </exclusions>

			
            </dependency>

			
            <dependency>

			
                  <groupId>org.apache.zookeeper</groupId>

			
                  <artifactId>zookeeper</artifactId>

			
            </dependency>

			
            <dependency>

			
                  <groupId>com.github.sgroschupf</groupId>

			
                  <artifactId>zkclient</artifactId>

			
            </dependency>

			
      </dependencies>

			
</project>
			
		
 

4.5 框架整合

复制配置文件：



修改applicationContext-service.xml 包名防止打包到maven仓库引入冲突：



创建e3-content-interface工程包：cn.e3mall.content.service

创建 e3-content-service工程包：cn.e3mall.content.service.impl



修改工程名和dubbo服务端口：



修改applicationContext-trans.xml事务配置：



复制e3-manager-service web.xml 修改：



参考e3-manager

4.6 dubbo发布使用tocmat

struts2后台传递数据到前台,前台得到数据。



后台通过request来传递数据到前台
String crmSystemUrl="www.baidu.com";
ServletActionContext.getRequest().setAttribute("crmSystemUrl",crmSystemUrl );



前台得到：
前台js得到：var crm_system_url='${crmSystemUrl}';
前台html标签内得到：${crmSystemUrl}
如：<td class=formRight width="50%" style="border:1px solid">${crmSystemUrl}</td>

　网站是围绕数据库来编程的，以数据库中的数据为中心，通过后台来操作这些数据，然后将数据传给前台来显示出来（当然可以将后台代码嵌入到前台）。即：






　　







　　下面就讲前台与后台进行数据交互的方法，分前台调用后台方法与变量；台调用前台js代码。本文先介绍前者，后者在后面文章中介绍。




前台调用后台方法与变量：



方法一：通过WebService来实现
步骤：

后台

Ø  首先引入命名空间（using System.Web.Services;）

Ø  然后定义公共的静态的方法（必须为public和static的,且静态方法不能访问外部的非静态变量，此时后台与前台相当于父类与子类的关系），并在该方法头部上加上[System.Web.Services.WebMethod]，来标注方法特性。

前台

Ø  添加ScriptManager服务器控件，并把其EnablePageMethods属性设为true。

Ø  通过PageMethods方法调用后台定义的public、static方法

 

PageMethods方法简介：

PageMethods.FunctionName(Paramter1,Parameter2,...,funRight,funError, userContext);

1)      Paramter1,Parameter2,...,表示的是FunctionName的参数,类型是Object或Array； 

2)      funRight是方法调用成功后的回调函数，对返回值进行处理

3)      funError是当后台的FunctionName方法发生异常情况下的执行的Js方法（容错处理方法）， 

4)      userContext是可以传递给SuccessMethod方法，或是FailedMethod方法的任意内容。
举例：

后台代码：





　　



[html] view
 plaincopy






using System;  

using System.Collections.Generic;  

using System.Linq;  

using System.Web;  

using System.Web.UI;  

using System.Web.UI.WebControls;  

using System.Web.Services;  

namespace WebApplication4  

{  

    public partial class WebForm10 : System.Web.UI.Page  

    {  

        protected void Page_Load(object sender, EventArgs e)  

        {  

  

        }  

        [WebMethod]  

        public static string test1(string userName)  

        {  

            return "hello "+userName+", 这是通过WebService实现前台调用后台方法";  

        }  

    }  

}  












前台代码：





　　



[html] view
 plaincopy






<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm10.aspx.cs" Inherits="WebApplication4.WebForm10" %>  

<!DOCTYPE html>  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head runat="server">  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  

    <title></title>  

</head>  

<body>  

    <form id="form1" runat="server">  

        <%--引入ScriptManager服务器控件--%>  

        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>  

        <script type="text/javascript">  

            function bclick() {  

                PageMethods.test1("zhipeng", funRight);  

            }  

  

            function funRight(val)       //回调函数，用val接受后台代码test1的执行结果    

            {  

                alert(val);               

            }  

        </script>  

        <input id="Button1" type="button" value="方法测试" onclick="bclick()" />//点击按钮会弹出对话框“通过WebService实现前台调用后台方法”  

    </form>  

</body>  

</html>  












点击按钮弹出如下对话框：





　　










方法二：通过<%=methodname()%>和<%#methodname()%>（methodname()为后台定义的方法）

这种方法调用的后台方法可能出现在前台的位置有3种情况：

1)     服务器端控件或HTML控件的属性

2)     客户端js代码中

3)     Html显示内容的位置（它作为占位符把变量显示于符号出现的位置）

这里对两者做简单实例，详细内容在后面文章中介绍
步骤：

后台

Ø  定义public或protected的变量或方法（不能为private）

前台

Ø  直接用<%= %>和<%# %>对后台变量或方法进行调用，两者的用法稍有差异（<%# %>基本上能实现<%= %>的所以功能）
举例：

后台代码：





　　



[html] view
 plaincopy






using System;  

using System.Collections.Generic;  

using System.Linq;  

using System.Web;  

using System.Web.UI;  

using System.Web.UI.WebControls;  

  

namespace WebApplication4  

{  

    public partial class WebForm1 : System.Web.UI.Page  

    {  

        public string name = "我是后台变量";  

        protected void Page_Load(object sender, EventArgs e)  

        {  

            this.DataBind();  

             

        }  

        //不能为private  

        protected string strTest() {  

            return "这是前台通过<%# %>调用后台方法";  

        }  

        public void  strTest2()  

        {  

            Response.Write("这是前台通过<%= %>调用后台方法");  

        }  

  

    }  

}  












前台代码：





　　



[html] view
 plaincopy






<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication4.WebForm1" %>  

  

<!DOCTYPE html>  

  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head runat="server">  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  

    <title></title>  

  

</head>  

<body>  

  

    <form id="form1" runat="server">  

    <div>  

        <b>服务器控件</b><br /><br />  

        服务器端文本框绑定后台方法：<asp:TextBox ID="TextBox1" runat="server" Text="<%#strTest()%>"></asp:TextBox><%=strTest()%><br />　  

        ......................变量：<asp:TextBox ID="TextBox2" runat="server" Text="<%#name%>"></asp:TextBox><br />　  

        服务器端文本框绑定后台方法：<asp:Label ID="Label1" runat="server" Text="Label"><%=strTest()%></asp:Label><br />  

        服务器端文本框绑定后台方法：<asp:Label ID="Label2" runat="server" Text="<%#strTest() %>"></asp:Label><br /><br />  

  

        <br /><br />  

        <b>客户端控件</b><br /><br />  

        客户端文本框绑定后台方法：<input id="Text1" type="text" value="<%#strTest()%>" /><%=name %><br />　          

        客户端标签: <div><%=strTest() %></div>  

         

    </div>  

    </form>  

</body>  

</html>  












运行结果：





　　







<%=methodname()%>和<%#methodname()%>两种方式的详细介绍（联系与区别）会在后面文章中详细介绍。




方法三：通过隐藏服务端按钮来实现

后台代码：





　　



[html] view
 plaincopy






using System;  

using System.Collections.Generic;  

using System.Linq;  

using System.Web;  

using System.Web.UI;  

using System.Web.UI.WebControls;  

  

namespace WebApplication4  

{  

    public partial class WebForm11 : System.Web.UI.Page  

    {  

        protected void Button1_Click(object sender, EventArgs e)  

        {  

            Response.Write("这是通过隐藏控件方式实现前台访问后台方法");  

        }  

    }  

}  












前台代码：





　　



[html] view
 plaincopy






<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm11.aspx.cs" Inherits="WebApplication4.WebForm11" %>  

  

<!DOCTYPE html>  

  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head runat="server">  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  

    <title></title>  

    <script type="text/javascript" >  

        function test() {  

            //通过客户端脚本选中隐藏控件，并调用后台相关方法  

            document.getElementById("Button1").click();  

        };  

    </script>  

</head>  

  

<body>  

    <form id="form1" runat="server">  

        <%--隐藏服务端铵钮--%>  

        <asp:Button ID="Button1" runat="server" Text="Button" style="display:none"  />  

        <%--调用客户端脚本，间接调用后台方法--%>  

        <input id="Button2" type="button" value="button" onclick="test()" />  

    </form>  

</body>  

</html>  











总结：

　　方法一的后台方法必须声明为public和static（否则会发生PageMethods未定义错误）,正是由于要将方法声明为static,使得这两种方法都有局限性，即静态方法中只允许访问静态成员变量。所以要想用这两种方式调用后台方法，后台方法中是不能访问非静态成员变量的。

　　方法二，后台方法没有任何限制，但是前台调用的时候由于<%=%>是只读的，<%=%>适合于调用后台方法经过处理并返回给客户端使用，不适合于将数据传到后台供后台使用

　　后面会讲后台调用前台js代码。。。

 

js前台与后台数据交互-前台调后台


分类： .net2013-11-29
 23:54 1476人阅读 评论(26) 收藏 举报



目录(?)[+]




 

　　网站是围绕数据库来编程的，以数据库中的数据为中心，通过后台来操作这些数据，然后将数据传给前台来显示出来（当然可以将后台代码嵌入到前台）。即：





　　







　　下面就讲前台与后台进行数据交互的方法，分前台调用后台方法与变量；台调用前台js代码。本文先介绍前者，后者在后面文章中介绍。




前台调用后台方法与变量：



方法一：通过WebService来实现
步骤：

后台

Ø  首先引入命名空间（using System.Web.Services;）

Ø  然后定义公共的静态的方法（必须为public和static的,且静态方法不能访问外部的非静态变量，此时后台与前台相当于父类与子类的关系），并在该方法头部上加上[System.Web.Services.WebMethod]，来标注方法特性。

前台

Ø  添加ScriptManager服务器控件，并把其EnablePageMethods属性设为true。

Ø  通过PageMethods方法调用后台定义的public、static方法

 

PageMethods方法简介：

PageMethods.FunctionName(Paramter1,Parameter2,...,funRight,funError, userContext);

1)      Paramter1,Parameter2,...,表示的是FunctionName的参数,类型是Object或Array； 

2)      funRight是方法调用成功后的回调函数，对返回值进行处理

3)      funError是当后台的FunctionName方法发生异常情况下的执行的Js方法（容错处理方法）， 

4)      userContext是可以传递给SuccessMethod方法，或是FailedMethod方法的任意内容。
举例：

后台代码：





　　



[html] view
 plaincopy






using System;  

using System.Collections.Generic;  

using System.Linq;  

using System.Web;  

using System.Web.UI;  

using System.Web.UI.WebControls;  

using System.Web.Services;  

namespace WebApplication4  

{  

    public partial class WebForm10 : System.Web.UI.Page  

    {  

        protected void Page_Load(object sender, EventArgs e)  

        {  

  

        }  

        [WebMethod]  

        public static string test1(string userName)  

        {  

            return "hello "+userName+", 这是通过WebService实现前台调用后台方法";  

        }  

    }  

}  












前台代码：





　　



[html] view
 plaincopy






<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm10.aspx.cs" Inherits="WebApplication4.WebForm10" %>  

<!DOCTYPE html>  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head runat="server">  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  

    <title></title>  

</head>  

<body>  

    <form id="form1" runat="server">  

        <%--引入ScriptManager服务器控件--%>  

        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>  

        <script type="text/javascript">  

            function bclick() {  

                PageMethods.test1("zhipeng", funRight);  

            }  

  

            function funRight(val)       //回调函数，用val接受后台代码test1的执行结果    

            {  

                alert(val);               

            }  

        </script>  

        <input id="Button1" type="button" value="方法测试" onclick="bclick()" />//点击按钮会弹出对话框“通过WebService实现前台调用后台方法”  

    </form>  

</body>  

</html>  












点击按钮弹出如下对话框：





　　










方法二：通过<%=methodname()%>和<%#methodname()%>（methodname()为后台定义的方法）

这种方法调用的后台方法可能出现在前台的位置有3种情况：

1)     服务器端控件或HTML控件的属性

2)     客户端js代码中

3)     Html显示内容的位置（它作为占位符把变量显示于符号出现的位置）

这里对两者做简单实例，详细内容在后面文章中介绍
步骤：

后台

Ø  定义public或protected的变量或方法（不能为private）

前台

Ø  直接用<%= %>和<%# %>对后台变量或方法进行调用，两者的用法稍有差异（<%# %>基本上能实现<%= %>的所以功能）
举例：

后台代码：





　　



[html] view
 plaincopy






using System;  

using System.Collections.Generic;  

using System.Linq;  

using System.Web;  

using System.Web.UI;  

using System.Web.UI.WebControls;  

  

namespace WebApplication4  

{  

    public partial class WebForm1 : System.Web.UI.Page  

    {  

        public string name = "我是后台变量";  

        protected void Page_Load(object sender, EventArgs e)  

        {  

            this.DataBind();  

             

        }  

        //不能为private  

        protected string strTest() {  

            return "这是前台通过<%# %>调用后台方法";  

        }  

        public void  strTest2()  

        {  

            Response.Write("这是前台通过<%= %>调用后台方法");  

        }  

  

    }  

}  












前台代码：





　　



[html] view
 plaincopy






<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication4.WebForm1" %>  

  

<!DOCTYPE html>  

  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head runat="server">  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  

    <title></title>  

  

</head>  

<body>  

  

    <form id="form1" runat="server">  

    <div>  

        <b>服务器控件</b><br /><br />  

        服务器端文本框绑定后台方法：<asp:TextBox ID="TextBox1" runat="server" Text="<%#strTest()%>"></asp:TextBox><%=strTest()%><br />　  

        ......................变量：<asp:TextBox ID="TextBox2" runat="server" Text="<%#name%>"></asp:TextBox><br />　  

        服务器端文本框绑定后台方法：<asp:Label ID="Label1" runat="server" Text="Label"><%=strTest()%></asp:Label><br />  

        服务器端文本框绑定后台方法：<asp:Label ID="Label2" runat="server" Text="<%#strTest() %>"></asp:Label><br /><br />  

  

        <br /><br />  

        <b>客户端控件</b><br /><br />  

        客户端文本框绑定后台方法：<input id="Text1" type="text" value="<%#strTest()%>" /><%=name %><br />　          

        客户端标签: <div><%=strTest() %></div>  

         

    </div>  

    </form>  

</body>  

</html>  












运行结果：





　　







<%=methodname()%>和<%#methodname()%>两种方式的详细介绍（联系与区别）会在后面文章中详细介绍。




方法三：通过隐藏服务端按钮来实现

后台代码：





　　



[html] view
 plaincopy






using System;  

using System.Collections.Generic;  

using System.Linq;  

using System.Web;  

using System.Web.UI;  

using System.Web.UI.WebControls;  

  

namespace WebApplication4  

{  

    public partial class WebForm11 : System.Web.UI.Page  

    {  

        protected void Button1_Click(object sender, EventArgs e)  

        {  

            Response.Write("这是通过隐藏控件方式实现前台访问后台方法");  

        }  

    }  

}  












前台代码：





　　



[html] view
 plaincopy






<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm11.aspx.cs" Inherits="WebApplication4.WebForm11" %>  

  

<!DOCTYPE html>  

  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head runat="server">  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  

    <title></title>  

    <script type="text/javascript" >  

        function test() {  

            //通过客户端脚本选中隐藏控件，并调用后台相关方法  

            document.getElementById("Button1").click();  

        };  

    </script>  

</head>  

  

<body>  

    <form id="form1" runat="server">  

        <%--隐藏服务端铵钮--%>  

        <asp:Button ID="Button1" runat="server" Text="Button" style="display:none"  />  

        <%--调用客户端脚本，间接调用后台方法--%>  

        <input id="Button2" type="button" value="button" onclick="test()" />  

    </form>  

</body>  

</html>  











总结：

　　方法一的后台方法必须声明为public和static（否则会发生PageMethods未定义错误）,正是由于要将方法声明为static,使得这两种方法都有局限性，即静态方法中只允许访问静态成员变量。所以要想用这两种方式调用后台方法，后台方法中是不能访问非静态成员变量的。

　　方法二，后台方法没有任何限制，但是前台调用的时候由于<%=%>是只读的，<%=%>适合于调用后台方法经过处理并返回给客户端使用，不适合于将数据传到后台供后台使用

　　后面会讲后台调用前台js代码。。。