jQuery&JSON~~

最新推荐文章于 2024-07-23 11:07:53 发布
最新推荐文章于 2024-07-23 11:07:53 发布
阅读量65 收藏
点赞数
文章标签： json javascript ViewUI
原文链接：http://www.cnblogs.com/Elgin/archive/2011/03/28/1997438.html
版权

呵呵，博客园现在还不支持搜狐博客直接搬家功能，只好把之前的搜狐博客日志一个一个Copy过来，和大家一起分享了，这篇是我10年的一个测试实例：

方法1:

using System.IO;
using System.Data.SqlClient;
using System.Data.Common;
using Microsoft.Practices.EnterpriseLibrary.Common;
using Microsoft.Practices.EnterpriseLibrary.Data;
 
using System.Text;
using System.Reflection;

后台代码:

protected void Page_Load(object sender, EventArgs e)
{
   if (!Page.IsPostBack)
   {
      string sql = @"SELECT top 10 [Materialcode]
                          ,[MaterialName]
                          ,[MaterialSpec]
                          ,[HelpCode]
                       FROM [aritime].[dbo].[Material_Info_t]";

      DbCommand dbcmd = null;
      dbcmd = DB.GetSqlStringCommand(sql);
      DataSet dataset = null;
      dataset = DB.ExecuteDataSet(dbcmd);
      DataTable dt = dataset.Tables[0];
      Materialcode_List = CreateJsonParameters(dt).ToString().Trim();
      //Response.Write(Materialcode_List.ToString());
       OnStart();
     }
   }

    public static string CreateJsonParameters(DataTable dt)
    {
        StringBuilder JsonString = new StringBuilder();
        JsonString.Clear();

        //Exception Handling       
        if (dt != null && dt.Rows.Count > 0)
        {
            JsonString.Append("{ ");
            //JsonString.Append(" var MaterialNameLists = [");

            JsonString.Append("[");

            for (int i = 0; i < dt.Rows.Count; i++)
            {
                JsonString.Append("{ ");
                for (int j = 0; j < dt.Columns.Count; j++)
                {
                    if (j < dt.Columns.Count - 1)
                    {
                        JsonString.Append("" + dt.Columns[j].ColumnName.ToString().Trim() + ":" + "\"" + dt.Rows[i][j].ToString().Trim() + "\",");
                    }
                    else if (j == dt.Columns.Count - 1)
                    {
                        JsonString.Append("" + dt.Columns[j].ColumnName.ToString().Trim() + ":" + "\"" + dt.Rows[i][j].ToString().Trim() + "\"");
                    }
                }
                /**/
                /**/
                /**/
                /*end Of String*/
                if (i == dt.Rows.Count - 1)
                {
                    JsonString.Append("} ");
                }
                else
                {
                    JsonString.Append("}, ");
                }
            }
            JsonString.Append("]");
 
            return JsonString.ToString().Trim();
        }
        else
        {
            return null;
        }
    }

    /// <summary>
    /// 将一个数据表转换成一个JSON字符串，在客户端可以直接转换成二维数组。
    /// </summary>
    /// <param name="source">需要转换的表。</param>
    /// <returns></returns>
    public static string DataTableToJson(DataTable source)
    {
        if (source.Rows.Count == 0)
            return "";
        StringBuilder sb = new StringBuilder("[");
        foreach (DataRow row in source.Rows)
        {
            sb.Append("[");
            for (int i = 0; i < source.Columns.Count; i++)
            {
                sb.Append('"' + row[i].ToString() + "\",");
            }
            sb.Remove(sb.Length - 1, 1);
            sb.Append("],");
        }
        sb.Remove(sb.Length - 1, 1);
        sb.Append("]");
        return sb.ToString();
    }

//    public void Atest()
//    {
//        string path = Server.MapPath("http://www.cnblogs.com/js/localdata.js");
//        if (File.Exists(path))
//        {
//            File.Delete(path);
//        }

//        string sql = @"SELECT [Materialcode]
//                          ,[MaterialName]
//                          ,[MaterialSpec]
//                          ,[HelpCode]
//                       FROM [aritime].[dbo].[Material_Info_t]";

//        DbCommand dbcmd = null;
//        dbcmd = DB.GetSqlStringCommand(sql);
//        DataSet dataset = null;
//        dataset = DB.ExecuteDataSet(dbcmd);
//        //创建JS文件.  
//        StreamWriter sr = File.CreateText(path);
//        sr.WriteLine("//初始化所有国内机场城市");
//        sr.WriteLine(" var MaterialNameLists = [" + "\r\n");
//        //   这里是JS中的内容  
//        for (int i = 0; i < dataset.Tables[0].Rows.Count - 1; i++)
//        {
//            sr.WriteLine("{ Materialcode: \"" + dataset.Tables[0].Rows[i]["Materialcode"].ToString().Trim() + "\",MaterialName: \"" + dataset.Tables[0].Rows[i]["MaterialName"].ToString().Trim() + "\",MaterialSpec: \"" + dataset.Tables[0].Rows[i]["MaterialSpec"].ToString().Trim() + "\",HelpCode:\"" + dataset.Tables[0].Rows[i]["HelpCode"].ToString().Trim() + "\"}," + "\r\n");
//        }

//        sr.WriteLine("{ Materialcode: \"" + dataset.Tables[0].Rows[dataset.Tables[0].Rows.Count - 1]["Materialcode"].ToString().Trim() + "\",MaterialName: \"" + dataset.Tables[0].Rows[dataset.Tables[0].Rows.Count - 1]["MaterialName"].ToString().Trim() + "\",MaterialSpec: \"" + dataset.Tables[0].Rows[dataset.Tables[0].Rows.Count - 1]["MaterialSpec"].ToString().Trim() + "\",HelpCode:\"" + dataset.Tables[0].Rows[dataset.Tables[0].Rows.Count - 1]["HelpCode"].ToString().Trim() + "\"}" + "\r\n");

//        sr.WriteLine("];" + "\r\n");

//        sr.WriteLine("var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];");

//        sr.WriteLine("var cities = ['Aberdeen', 'Ada','Akron','Yorkshire', 'Yorkville'];");
//        sr.Close();
//    }


前台代码:

<input type="text" id="suggest13" />

    <script type="text/javascript" src="http://www.cnblogs.com/js/jquery.js"></script>
    <%--    <script type="text/javascript" src="http://www.cnblogs.com/js/json.js"></script>--%>
    <script type='text/javascript' src='http://www.cnblogs.com/js/jquery.autocomplete.js'></script>
    <%--    <script type='text/javascript' src='http://www.cnblogs.com/js/localdata.js'></script>--%>
    <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/js/jquery.autocomplete.css" />

    <script type="text/javascript">
        $().ready(function () {

            function log(event, data, formatted) {
                $("<li>").html(!data ? "No match!" : "Selected: " + formatted).appendTo("#result");
            }

            function formatItem(row) {
                return row[0] + " (<strong>id: " + row[1] + "</strong>)";
            }
            function formatResult(row) {
                return row[0].replace(/(<.+?>)/gi, '');
            }

            var MaterialNameLists = '<%=Materialcode_List%>';

            method 1：eval来转换JSON字符到Object//
            var arr = eval('(' + MaterialNameLists + ')')
            alert(arr);

            method 2：parseJSON来转换JSON字符到Object//
            //            var obj = MaterialNameLists.parseJSON();
            //            alert(obj.toJSONString()); 

            //            var testlist = [{ Materialcode: "WXCL200400001", MaterialName: "螺栓松动剂", MaterialSpec: "", HelpCode: "LSSDJ" }, { Materialcode: "WXCL200400002", MaterialName: "煤油", MaterialSpec: "", HelpCode: "MY" }, { Materialcode: "WXCL200400003", MaterialName: "铁刷", MaterialSpec: "", HelpCode: "TS" }, { Materialcode: "WXCL200400004", MaterialName: "螺丝", MaterialSpec: "M16*100", HelpCode: "LS" }, { Materialcode: "WXCL200400005", MaterialName: "螺丝", MaterialSpec: "M8*50", HelpCode: "LS" }, { Materialcode: "WXCL200400006", MaterialName: "一字螺丝刀", MaterialSpec: "小", HelpCode: "YZLSD" }, { Materialcode: "WXCL200400007", MaterialName: "十字螺丝刀", MaterialSpec: "小", HelpCode: "SZLSD" }, { Materialcode: "WXCL200400008", MaterialName: "电工皮带", MaterialSpec: "", HelpCode: "DGPD" }, { Materialcode: "WXCL200400009", MaterialName: "工具套", MaterialSpec: "", HelpCode: "GJT" }, { Materialcode: "WXCL200400010", MaterialName: "电工刀", MaterialSpec: "", HelpCode: "DGD"}];

            //            var aad = [{ Materialcode: "WXCL200400001", MaterialName: "螺栓松动剂", MaterialSpec: "", HelpCode: "LSSDJ" }, { Materialcode: "WXCL200400002", MaterialName: "煤油", MaterialSpec: "", HelpCode: "MY" }, { Materialcode: "WXCL200400003", MaterialName: "铁刷", MaterialSpec: "", HelpCode: "TS" }, { Materialcode: "WXCL200400004", MaterialName: "螺丝", MaterialSpec: "M16*100", HelpCode: "LS" }, { Materialcode: "WXCL200400005", MaterialName: "螺丝", MaterialSpec: "M8*50", HelpCode: "LS" }, { Materialcode: "WXCL200400006", MaterialName: "一字螺丝刀", MaterialSpec: "小", HelpCode: "YZLSD" }, { Materialcode: "WXCL200400007", MaterialName: "十字螺丝刀", MaterialSpec: "小", HelpCode: "SZLSD" }, { Materialcode: "WXCL200400008", MaterialName: "电工皮带", MaterialSpec: "", HelpCode: "DGPD" }, { Materialcode: "WXCL200400009", MaterialName: "工具套", MaterialSpec: "", HelpCode: "GJT" }, { Materialcode: "WXCL200400010", MaterialName: "电工刀", MaterialSpec: "", HelpCode: "DGD"}];

            //              alert(aad.toString());

            //            alert(arr);

            $("#suggest13").autocomplete(arr, {
                max: 15,    //列表里的条目数
                minChars: 0,    //自动完成激活之前填入的最小字符
                width: 400,     //提示的宽度，溢出隐藏
                scrollHeight: 400,   //提示的高度，溢出显示滚动条
                matchContains: true,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
                autoFill: false,    //自动填充

                formatItem: function (row, i, max) {
                    return i + "/" + max + ": \"" + row.HelpCode + "\" [" + row.Materialcode + "][" + row.MaterialName + "][" + row.MaterialSpec + "]";
                },
                formatMatch: function (row, i, max) {
                    return row.HelpCode + " " + row.Materialcode + " " + row.MaterialName + " " + row.MaterialSpec;
                },
                formatResult: function (row) {
                    return row.MaterialName;
                }
            }).result(function (event, row, formatted) {
                //                var txt = '<%=memo_Input.ClientID%>';
                //                document.getElementById(txt).value = row.MaterialName;
                //                document.getElementById('<%=memo_Input.ClientID%>').value = row.MaterialName;
            });
        });
</script>

                

          

        2011032809221179.jpg  

          

          

方法2:

后台代码:
    public void Atest()
    {
        string path = Server.MapPath("http://www.cnblogs.com/js/localdata.js");
        if (File.Exists(path))
        {
            File.Delete(path);
        }

        string sql = @"SELECT [Materialcode]
                          ,[MaterialName]
                          ,[MaterialSpec]
                          ,[HelpCode]
                       FROM [aritime].[dbo].[Material_Info_t]";

        DbCommand dbcmd = null;
        dbcmd = DB.GetSqlStringCommand(sql);
        DataSet dataset = null;
        dataset = DB.ExecuteDataSet(dbcmd);
        //创建JS文件.  
        StreamWriter sr = File.CreateText(path);
        sr.WriteLine("//初始化所有国内机场城市");
        sr.WriteLine(" var MaterialNameLists = [" + "\r\n");
        //   这里是JS中的内容  
        for (int i = 0; i < dataset.Tables[0].Rows.Count - 1; i++)
        {
            sr.WriteLine("{ Materialcode: \"" + dataset.Tables[0].Rows[i]["Materialcode"].ToString().Trim() + "\",MaterialName: \"" + dataset.Tables[0].Rows[i]["MaterialName"].ToString().Trim() + "\",MaterialSpec: \"" + dataset.Tables[0].Rows[i]["MaterialSpec"].ToString().Trim() + "\",HelpCode:\"" + dataset.Tables[0].Rows[i]["HelpCode"].ToString().Trim() + "\"}," + "\r\n");
        }

        sr.WriteLine("{ Materialcode: \"" + dataset.Tables[0].Rows[dataset.Tables[0].Rows.Count - 1]["Materialcode"].ToString().Trim() + "\",MaterialName: \"" + dataset.Tables[0].Rows[dataset.Tables[0].Rows.Count - 1]["MaterialName"].ToString().Trim() + "\",MaterialSpec: \"" + dataset.Tables[0].Rows[dataset.Tables[0].Rows.Count - 1]["MaterialSpec"].ToString().Trim() + "\",HelpCode:\"" + dataset.Tables[0].Rows[dataset.Tables[0].Rows.Count - 1]["HelpCode"].ToString().Trim() + "\"}" + "\r\n");

        sr.WriteLine("];" + "\r\n");

        sr.WriteLine("var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];");

        sr.WriteLine("var cities = ['Aberdeen', 'Ada','Akron','Yorkshire', 'Yorkville'];");
        sr.Close();
    }

  前台代码:
    <script type="text/javascript" src="http://www.cnblogs.com/js/jquery.js"></script>
    <script type='text/javascript' src='http://www.cnblogs.com/js/jquery.autocomplete.js'></script>
    <script type='text/javascript' src='http://www.cnblogs.com/js/localdata.js'></script>
    <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/js/jquery.autocomplete.css" />

    <script type="text/javascript">
        $().ready(function () {

            function log(event, data, formatted) {
                $("<li>").html(!data ? "No match!" : "Selected: " + formatted).appendTo("#result");
            }

            function formatItem(row) {
                return row[0] + " (<strong>id: " + row[1] + "</strong>)";
            }
            function formatResult(row) {
                return row[0].replace(/(<.+?>)/gi, '');
            }
 
            $("#suggest13").autocomplete(MaterialNameLists, {
                max: 15,    //列表里的条目数
                minChars: 0,    //自动完成激活之前填入的最小字符
                width: 400,     //提示的宽度，溢出隐藏
                scrollHeight: 400,   //提示的高度，溢出显示滚动条
                matchContains: true,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
                autoFill: false,    //自动填充

                formatItem: function (row, i, max) {
                    return i + "/" + max + ": \"" + row.HelpCode + "\" [" + row.Materialcode + "][" + row.MaterialName + "][" + row.MaterialSpec + "]";
                },
                formatMatch: function (row, i, max) {
                    return row.HelpCode + " " + row.Materialcode + " " + row.MaterialName + " " + row.MaterialSpec;
                },
                formatResult: function (row) {
                    return row.MaterialName;
                }
            }).result(function (event, row, formatted) {
                var txt = '<%=inplace_Input.ClientID%>';
                document.getElementById(txt).value = row.MaterialName;
                document.getElementById('<%=inplace_Input.ClientID%>').value = row.MaterialName;
            });
        });

</script>

如何给文本框赋值:

   var txt = '<%=inplace_Input.ClientID%>';
   alert(txt.toString());
   document.getElementById(txt).value = row.MaterialName;
   document.getElementById('<%=inplace_Input.ClientID%>').value = row.MaterialName;

将json字符串转换为json 对象:

   var MaterialNameLists = '<%=Materialcode_List%>';

   method 1：eval来转换JSON字符到Object//
   var arr = eval('(' + MaterialNameLists + ')')

转载于:https://www.cnblogs.com/Elgin/archive/2011/03/28/1997438.html

dibi7969
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
[Jquery]Jquery AJAX post提交json示例
德仔
01-23 1万+
下面是html请求web服务器api接口的示例，是post发送json方式请求。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <script src="
jquery ajax json文件,jQuery ajax读取本地json文件
weixin_31746993的博客
08-05 1398
jQuery ajax读取本地json文件json文件{"first":[{"name":"张三","sex":"男"},{"name":"李四","sex":"男"},{"name":"王武","sex":"男"},{"name":"李梅","sex":"女"}]}js方法一:$.ajax({url: "ceshi.json",//json文件位置type: "GET",//请求方式为getda...
jquery 发送 json
weixin_52026996的博客
06-21 983
json
jQuery调用json文件
liqiyu2014的博客
03-22 1239
jQuery调用json
jquery 创建 json字符串
liulingdi的博客
09-26 4540
var json = {"classes":9772,"classes.loaded":9845,"classes.unloaded":73"mem":1144291,"mem.free":577074,"processors":4,"instance.uptime":748070370}; var all = {}; var arr = ["clas
【Jquery】jQuery操作json字符串或json对象
liuzhenhe1988的专栏
03-24 1164
前言 很多时候需要将json字符串转换为json对象，然后循环处理，或是将json对象转换为json字符串作为参数传递给相关接口，接下来将介绍几种转换方式 假设json字符串为 var jsonStr='[{"Id":1,"Title":"张三","Sex":"男"},{"Id":2,"Title":"李四","Sex":"男"}]'; 假设json对象为 varjsonObj=[ { "Id":1, "Title":"张三", "Sex...
jquery字符串&Json互转
夏天龙的博客
01-26 454
json字符串转json对象：jQuery.parseJSON(jsonStr); json对象转json字符串：JSON.stringify(jsonObj); IE中可能对unicode使用“\uXXXX”格式来编码，可以使用如下来解码： function unicode2Char(str) { return (str.replace(/\\/g, "%"));
jQuery的查找与过滤应用&json
独酌101112的博客
03-12 650
输入值后，用jQuery获取表单的JSON字符串，key和value分别对应每个输入的name和相应的value，例如：{“name”:“Michael”,“email”:…} <form id="test-form" action="#0" onsubmit="return false;"> <p><label>Name: <input name...
jquery json html 插件,jQuery Json高亮插件json-viewer.js使用方法详解
weixin_34294809的博客
06-21 1085
本文主要为大家详细介绍了jQuery Json数据格式排版高亮插件json-viewer.js的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解1.插件介绍：jquery.json-viewer.js是一款查看json格式数据的jquery插件。它可以将混乱的json数据漂亮的方式展示在...
jquery.json.js使用
极客神殿
01-04 6161
死亡并不可怕，可怕的是你没有真正活过。依赖Jquery,以下是jquery.json代码:(function (factory) { if (typeof define === 'function' && define.amd) { // AMD define(['jquery'], factory); } else if (typeof export
jquery & json
05-27
**jQuery与JSON** jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互。而JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也...
1.Javascript & jQuery & Ajax & JSON
01-04
JavaScript、jQuery、Ajax和JSON是Web开发中的四个关键概念，它们在构建动态、交互式的网页应用中发挥着重要作用。下面将分别对这四个主题进行详细阐述。 **JavaScript** 是一种轻量级的脚本语言，主要用于客户端的...
formPlugin:一个基于jQuery && json2的表单数据json方式提交的插件
06-20
formPlugin based on jQuery and json2.Simple form submit plugin based on jQuery 1.8.x && json2.jsSupport Firefox, Chrome, IE 8 && high version of IEThis plugin build under utf-8 encoding environmentYou...
Jquery解析json数据详解
01-19
最近被jquery折磨了一番，倒腾了一个jquery解析json的demo,本demo想实现从asp.net后台实例化dataSet或者dataTable数据集，将dataSet转换成json并返回给客户端，客户端用jquery getJson方法解析出来并显示在页面上。...
JQuery&JAVA JSON互转
08-10
在JQuery中，`$.getJSON()`函数用于从服务器获取JSON数据，`$.ajax()`或`$.post()`也可以配合`dataType: 'json'`选项来请求和解析JSON。`$.parseJSON()`方法用于将JSON字符串解析为JavaScript对象，但此方法在...
微信小程序安装vant组件库和使用
qq_61132537的博客
07-23 303
van-button type="primary">主要按钮</van-button>
本地部署SearXNG
最新发布
m0_62458145的博客
07-23 333
当您安装 SearXNG 时，默认的输出格式是 HTML 格式。请将以下行添加到 settings.yml 文件中。如前面的示例所示，settings.yml 文件位于 ${PWD}/searxng/settings.yml。SearXNG 是一个免费的互联网元搜索引擎，整合了各种搜索服务的结果。用户不会被跟踪，也不会被分析。中填写访问地址，例如：http://x.x.x.x:8080，如果你想通过其他方式安装 SearXNG，请参考。3. 在 Dify 中集成 SearXNG。
鸿蒙 LazyForEach 踩坑
熊佳龙的博客
07-19 186
ArkTS LazyForEach列表不显示
Gson使用TypeAdapterFactory和TypeAdapter实现Json中的Key统一修改
Zorro的博客
07-23 169
【代码】Gson使用TypeAdapterFactory和TypeAdapter实现Json中的Key统一修改。
jQuery与JSON结合的AJAX优化与实战
本篇文章主要探讨了如何在jQuery中有效地与JSON数据进行结合，以提高Web开发中的数据处理和用户体验。jQuery，作为一款流行的JavaScript库，提供了强大的DOM操作和简化了的AJAX交互功能，使得与JSON数据的集成变得...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值