`

AJAX $.toJSON的用法或把数组转换成json类型

c#ajaxjquery 
阅读更多

1. html页面全部代码

<html>
<head>
    <title></title>
    <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="../../Scripts/JqueryJson.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#json").click(function () {

             //数组里的字段的命名和类型要和一般处理程序里定义的类里的变量要一样

             //否则会出问题
                 var postdata = new Array();
                postdata[1] = { id: 1, number: "yes" };
                postdata[2] = { id: 2, number: "no" };

 

                var postData = $.toJSON(postdata);  //把数组转换成json字符串

                //将json字符串反序列化，这个只是测试一下数组是否转换成json字符串

                var content = $.parseJSON(postData);
                $.each(content, function () {
                    alert(this.number);
                });

                //post提交并处理

                $.post("json.ashx", { "array": postData }, function (data, status) {
                    if (status == "success") {
                        alert(data);
                    }
                });

            });
        })
    </script>
</head>
<body>
<input type="button" value="json" id="json"/>
</body>
</html>

2.json.ashx页面全部代码

<%@ WebHandler Language="C#" Class="json" %>

using System;
using System.Web;
using System.Web.Script.Serialization;
using System.Collections.Generic;

public class json : IHttpHandler {
   
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
               
        //接受出过来的值  

        string sun = context.Request["array"].ToString();

        //实例化JavaScriptSerializer对象
         JavaScriptSerializer jss = new JavaScriptSerializer();
        List<array> a = new List<array>();

        //把json转换其他list<array>类型
         a = jss.Deserialize(sun, typeof(List<array>)) as List<array>;
        string meg=null;
        foreach (var item in a)
        {
            meg += item.number;
        }
        context.Response.Write(meg);
    }

    public class array
    {
        public int id { get; set; }
        public string number { get; set; }
    }
     public bool IsReusable {
        get {
            return false;
        }
    }

}

 

 

我的代码：

function ClickPreViewHandle(obj) {
        var divid = $(obj).attr("surfaceid").replace("btnPV", "div")
        var inputvalues = GetSurfaceTextInputValue(divid);
        var inputvaluesJS = $.toJSON(inputvalues);
        jQuery.blockUI({ message: "Generation Image...", css: { padding: 25, color: '#fff', border: '3px solid #aaa', backgroundColor: '#507691'} });
        $.ajax({
            type: "post",
            url: "/PersonalizerPreViewHandler.ashx",
            //dataType: "json",
            data: { 'values': inputvaluesJS },
            success: function (data) {
                var leftA = divid.replace("div", "divimg");
                $("#" + leftA + " img").attr("src", data);
                jQuery.unblockUI();
            },
            error: function (err) {
                alert("error:" + err);
                jQuery.unblockUI();
            }
        });
        return false;
    }
 Handler
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using THY.Allure.BusinessEntities.BaseEntities;

namespace THY.Allure.Web
{
    /// <summary>
    /// Summary description for PersonalizerPreViewHandler
    /// </summary>
    public class PersonalizerPreViewHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string optionBOStr = context.Request.Params["values"];
            JavaScriptSerializer jss = new JavaScriptSerializer();
            List<ProductDetailOptionsBO> optionBOs = new List<ProductDetailOptionsBO>();
            optionBOs = jss.Deserialize(optionBOStr, typeof(List<ProductDetailOptionsBO>)) as List<ProductDetailOptionsBO>;
            
            context.Response.Write("~/media/images/cordial/product-surface-images/Postcards/PC1476/010.ashx");
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
 
0
顶
3
踩
分享到：
| C#的继承机制
评论
1 楼 liuweihug 2014-04-08  
Jquery+asp.net 后台数据传到前台js进行解析的办法说明 - 项目实战 - IT工作生活这点事。Just Such So!
http://www.suchso.com/projecteactual/jquery-aspnet-back-js-parse-object-list.html
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    将数组转换成JSON对象

    在提供的代码片段中，`DeleteByIds`函数展示了如何使用`toJSON`函数将由`CheckBox.GetCheckedIds()`返回的数组转换为JSON对象，然后通过Ajax请求发送到服务器进行删除操作。这表明，在实际开发中，将数据转换为JSON...

    jquery.json-2.4.min.js

    它的作用是将JavaScript对象（包括数组、对象、数字、字符串等基本类型）转换成符合JSON规范的字符串。这个过程称为序列化。例如，如果你有一个JavaScript对象`var obj = {name: "John", age: 30}`，调用`$.toJSON...

    jquery ajax 向后台传递数组参数示例

    $.ajax({ url: "servlet/AjaxServlet", type: "POST", data: { "persons": jsonData }, contentType: "application/json", success: function(response) { // 处理响应 } }); ``` 在后台，我们需要解析这个...

    使用JQuery实现从JSON对象转换为form提交数据

    转换后的数据可以与jQuery的`$.ajax()`或`$.post()`方法结合，以异步方式发送到服务器。例如： ```javascript var jsonData = { name: 'John', age: 30 }; var formData = jsonToFormParams(jsonData); $.ajax...

    jquery与java交互通过json传递数据的经典实例

    我们可以使用`$.parseJSON()`（已废弃，现在推荐使用`JSON.parse()`）或`$.getJSON()`来解析JSON字符串，然后操作DOM更新页面内容。 ```javascript success: function(response) { var user = JSON.parse(response...

    ajax解析json实例

    $.ajax({ url: 'http://example.com/data', type: 'GET', dataType: 'json', success: function(data) { console.log(data); // 解析并处理返回的JSON数据 }, error: function(error) { console.error('...

    JQuery权威指南源代码

    使用$.isPlainObject()函数检测对象是否为原始对象 使用$.contains()函数检测两个节点是否包含 使用$.param()进行数组元素序列化 使用函数$.extend()扩展工具函数 使用函数$.proxy()改变事件函数的作用域 使用...

    json的介绍（二）----json在web的使用

    例如，使用jQuery库的`$.ajax()`或`$.getJSON()`方法，可以方便地发起JSON数据请求并处理响应。 4. **JSONP（JSON with Padding）跨域通信**：由于浏览器的安全策略，不同源的Web服务不能直接通信。JSONP通过动态...

    json常用方法，json解析

    `JSON.stringify()` 方法用于将 JavaScript 对象或数组转换为 JSON 字符串。此方法支持以下参数： 1. **value**：任何有效的 JavaScript 值（如对象或数组）。 2. **replacer**：可选参数，用于指定对象值如何序列...

    JQuery&JAVA JSON互转

    这个文件很可能包含了自定义的JSON处理工具类，可能包含如`toJson()`和`fromJson()`这样的方法，用于将Java对象转换成JSON字符串以及将JSON字符串反序列化为Java对象。 5. **jquery.json-2.3.min.js**： 这是一个...

    struts json经典小例子

    接着，jQuery是一个强大的JavaScript库，它的$.ajax()或者$.getJSON()方法可以方便地发起AJAX请求。在本例中，jQuery将向服务器发送一个HTTP请求，请求的目标是我们的Struts Action。服务器端的Action接收到请求后，...

    ajax 中的全面json参考材料

    String jsonString = gson.toJson(yourJavaObject);` - 反序列化：`YourJavaObject obj = gson.fromJson(jsonString, YourJavaObject.class);` 7. 安全性与兼容性： 虽然JSON是基于JavaScript的，但在实际应用中...

    json解析文件ToJSP

    在本主题"json解析文件ToJSP"中，我们将探讨如何将JSON解析为Java对象，并将这些对象在JSP（JavaServer Pages）中呈现出来，特别是在使用JQuery的$.ajax()方法与Servlet进行异步通信的场景下。 首先，理解JSON格式...

    通过构造AJAX参数实现表单元素JSON相互转换

    可以使用jQuery内置的`parseJSON`方法将字符串转换为JSON对象，或者使用`toJSON`方法将JSON对象转换成字符串。例如： ```javascript var obj = jQuery.parseJSON('{"name":"John"}'); // JSON字符串转换为对象 ...

    JSON的基本用法

    - 将Java对象转换为JSON字符串：通过`Gson().toJson(object)`方法，我们可以轻松地将Java对象转化为JSON字符串。 - 将JSON字符串反序列化为Java对象：`Gson().fromJson(jsonString, Class)`方法可以将JSON字符串...

    Jquery实现ajax的详细文档

    在前端，我们可以使用jQuery的`$.getJSON`方法发送AJAX请求。以登录功能为例，以下是一个简单的JavaScript代码片段： ```html &lt;script type="text/javascript" src="js/jquery-1.3.min.js"&gt; function GetJson() { ...

    JSP中如何使用JSON

    例如，使用jQuery的`$.ajax`方法发送一个包含JSON数据的POST请求： ```javascript var request = { query: '北京', type: 'direction' }; $.ajax({ url: '/search', type: 'POST', contentType: 'application...

    Javaweb项目ajax请求Json实例

    在这个例子中，`Person`是一个Java对象，`toJson`方法将其转换为JSON字符串。 三、Ajax请求 在客户端，我们可以使用JavaScript的XMLHttpRequest对象或者更现代的fetch API来发起异步请求。这里我们使用jQuery的ajax...

    json--jar包

    例如，你可以使用`Gson.toJson()`方法将Java对象转化为JSON，`Gson.fromJson()`则用于反序列化。 ```java import com.google.gson.Gson; public class User { String name; int age; // getters and setters }...

    ajax struts 无刷新访问后台返回json数据

    - **创建Ajax请求**：在JavaScript中，通过XMLHttpRequest对象或者jQuery的`$.ajax()`方法发起Ajax请求。请求的目标URL应指向Struts的Action。 ```javascript var xhr = new XMLHttpRequest(); xhr.open("POST", ...

Magicbox
Global site tag (gtag.js) - Google Analytics