jQuery JSON转换数组转字符串获取显示器长宽

最新推荐文章于 2023-07-09 03:31:24 发布

KingCruel

最新推荐文章于 2023-07-09 03:31:24 发布

阅读量2.8k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/KingCruel/article/details/47166629

版权

JavaScript 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>jQuery JSON转换 数组转字符串 获取显示器长宽</title>
    <script src="~/jquery/jquery.min.js"></script>
    <style>
        .mydiv {width: 550px;}
        .mydiv ul {list-style: none;}
        .mydiv li {float: left;width: 180px;margin-top: 10px;}
    </style>
</head>
<body>
    <div class="mydiv">
        <ul>
            <li><input type="button" value="JSON对象转成字符串" οnclick="conversion(1)" /></li>
            <li><input type="button" value="字符串转成JSON对象" οnclick="conversion(2)" /></li>
            <li><input id="btnStr" type="button" value="action返回字符串" /></li>
            <li><input type="button" value="each循环数组" οnclick="jQeach()" /></li>
            <li><input id="btnmap" type="button" value="map转换" /></li>
            <li><input id="btnToStr" type="button" value="数组转为字符串" /></li>
            <li><input id="btnToArr" type="button" value="字符串转为数组" /></li>
        </ul>
    </div>
    <header>
        <h1>头部</h1>
    </header>
    <nav>
        <ul>
            <li id="home">Home</li>
            <li id="about">About</li>
            <li id="contact">Contact</li>
        </ul>
    </nav>
    <section>
        <h1>My Article</h1>
        <article>
            <p>this is first article</p>
            <div id="second_item">
                this is second article,I'm <a href="http://www.cnlbogs.com/hongten">Hongten</a>
            </div>
            <p>this is third article</p>
            <p>this is 4's article</p>

        </article>
    </section>

    <footer>
        <p><a href="mailto:hongtenzone@foxmail.com">hongtenzone@foxmail.com</a> || <a href="http://www.cnlbogs.com/hongten">Hongten</a></p>
    </footer>
    <script>
        $(function () {
            var w = $(window).width();
            var h = $(window).height();
            //alert("显示器长度：" + w + "  显示器长度/2：" + w / 2);
            //alert("显示器宽度：" + h + "  显示器宽度/2：" + h / 2);
            $(window).resize();
        });

        //josn转换
        function conversion(type) {
            var a = { "name": "tom", "sex": "男", "age": "24" };
            var b = '{"name":"Mike","sex":"女","age":"29"}';
            if (type == 1) {//将JSON对象转为字符串
                var aToStr = JSON.stringify(a);
                alert(aToStr);
            }
            else if (type == 2) {//将字符串转为JSON对象
                var bToObj1 = JSON.parse(b);
                var bToObj2 = jQuery.parseJSON(b);
                var bToObj3 = eval("(" + b + ")")
                alert(bToObj1);
                alert(bToObj2);
                alert(bToObj2);
            }
        }

        //循环数组
        function jQeach() {
            //jQuery.each( object, callback )
            //第一个参数表示索引,第二个参数表示值, this表示当前遍历的元素,

            var arr = ["a0", "b1", "c2"];

            $.each(["a", "b", "c"], function (i, n) {
                alert("Item #" + i + ": " + n);//可以获取到i值
            });

            $.each(arr, function (i, n) {
                alert("Item #" + i + ": " + n);//可以获取到i值
            });
        }

        //数组转为字符串
        $("#btnToStr").click(function (event) {
            var arr1 = [1, 2, 3, 4, 5];
            var arr2 = ["a", "b", "c", "d", "e"];
            alert(arr1.join(","));
            alert(arr2.join(","))
        });

        //字符串转为数组
        $("#btnToArr").click(function (event) {
            var str = "1,2,3,4,5";
            var arr = str.split(",");
            for (var i = 0; i < arr.length ; i++) {
                alert(arr[i]);
            }
        });

        //map转换
        $("#btnmap").click(function (event) {
            var arr = ["a", "b", "c", "d", "e"];
            alert(arr.join(", "));

            arr = jQuery.map(arr, function (n, i) {
                return (n.toUpperCase() + i);
            });
            alert(arr.join(","));

            arr = jQuery.map(arr, function (a) {
                return a + a;
            });

            alert(arr.join(","));
        });

        $("#btnStr").click(function (event) {
            $.ajax({
                url: '@Url.Action("ReturnString", "EasyUITest")',
                type: 'get',
                dataType: 'json',
                async: false,
                success: function (data) {
                    alert(data);
                    alert(JSON.parse(data));
                }
            });
        });


        //获取显示器长宽，div定位
        $(window).resize(function () {
            $(".mydiv").css({
                position: "absolute",
                left: ($(window).width() - $(".mydiv").outerWidth()) / 2,
                top: ($(window).height() - $(".mydiv").outerHeight()) / 3
            });
        });
    </script>
</body>
</html>

Controller

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace WebApplication1.Controllers
{
    public class EasyUITestController : Controller
    {
        public ActionResult JQTest()
        {
            return View();
        }

        public JsonResult ReutrnString()
        {
            string str = "[{\"id\":\"1\",\"name\":\"a\"},{\"id\":\"2\",\"name\":\"b\"},{\"id\":\"3\",\"name\":\"c\"}]";
            return Json(str, JsonRequestBehavior.AllowGet);
        }  
    }
}