ajax处理web服务端的json数据，显示在devextreme框架的手机前端页面

开发工具：Visual Studio2017

数据库：mongodb

开发框架：Devextreme

运用技术：ajax，jquery，web服务

例子：通过在input框里输入对应id号，显示相关user信息（姓名，爱好，年龄）

home.dxview（dev框架的前端代码）：

<div data-options="dxView : { name: 'home', title: 'Home' } " >
    <div class="home-view dx-content-background" data-options="dxContent : { targetPlaceholder: 'content' } " >
        <div id="container" style="margin:30px auto">
            <div id="inputId"></div> //输入框
            <div id="subBtn"></div> //提交按钮
            <br />
            <br />
            <br />
            姓名：<div id="name"></div> //信息显示区
            爱好：<div id="hobby"></div>
            年龄：<div id="age"></div>
        </div>
    </div>
</div>

【这个框架的方便之处就是解决了平台兼容性问题，只需要用html+css+jquery就可以打造可运行在ios、Android和windows的系统软件，所以前端代码的主内容就是html（框架问题，我在home.js文件里定义各个div的控件类型及属性）】

home.js (jquery)

Application1.home = function (params) {
"use strict";

function get() {

//实例化各个控件

        $("#inputId").dxTextBox({
            placeholder: "please input one user ID："
        })

        $("#name").dxTextBox({
            placeholder: "name"
        })

        $("#hobby").dxTextBox({
            placeholder: "hobby"
        })

        $("#age").dxTextBox({
            placeholder: "age"
        })

        $("#subBtn").dxButton({
            text: "提交",
            onClick: function () {
                var url = "http://localhost:62615/WebService1.asmx/GetUsers" //此url的获取，在点开webServer服务器的页面时候会出现，webServer服务器端代码编写在下面
                var val = $("#inputId").dxTextBox("instance").option("value")

                if (Number(val) >= 5) {    //数据库里面只有4个实例数据
                    alert("没找到")
                }

                $.ajax
                    ({
                        type: "post",
                        url: url,
                        data: { "uid": val }， //uid被输入框内容指定
                        dataType: "json",
                        success: function (data) {
                            if (data == null) {
                                alert("not found")
                            } else {
                                var dataObj = data
                                $.each(dataObj, function (index, item) {    //遍历后台传入的data（json格式）
                                        $("#name").dxTextBox("instance").option("value", item.name)
                                        $("#hobby").dxTextBox("instance").option("value", item.hobby)
                                        $("#age").dxTextBox("instance").option("value", item.age)

})

                            }
                        },
                        error: function (XMLHttpRequest, status, error) {
                            alert("访问不到服务器！", "error", 3000);
                        }
                    });

}
})

}

var viewModel = {

        viewShown: function () {
            get()
        }

};

return viewModel;
};

webServer（服务）：

【新建一个webServer项目，作为我们软件的服务器端，负责连接mongodb，处理数据】

【这里打开的页面，点击对应方法，显示的页面地址直接作为上面ajax的url地址】

【这里需要引用

using MongoDB.Bson;

using MongoDB.Driver;

using MongoDB.Driver.Linq;//LINQ支持
using System.Web.Script.Serialization;
using MongoDB.Driver.Builders;

可去nuget包自行下载

】

        //查询指定字段值
        //连接数据库
        private const string connectionString = "mongodb://localhost:27017/";
        private const string dbName = "mydb";
        private static MongoClient client = new MongoClient(connectionString);
        private static MongoServer server = client.GetServer();
        private static MongoDatabase db = server.GetDatabase(dbName);
        MongoCollection<BsonDocument> collection = db.GetCollection("read_test");

        //数据读取
        [WebMethod]
        public void GetUsers(string uid)
        {
            var linquery = from e in collection.AsQueryable<Users>()
                           where e.uid == uid
                           select e;

            var returnValue = linquery.ToList();
            string json = ToJSON(returnValue);
            Context.Response.Write(json);

}

public class Users
        {
            public ObjectId _id { get; set; }
            public string uid { get; set; }
            public string name { get; set; }
            public string hobby { get; set; }
            public int age { get; set; }
        }

        //对数据序列化，返回JSON格式
        public string ToJSON(object obj)
        {
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            return serializer.Serialize(obj);//json 序列化对象数组
        }

mongodb图形化数据库：

ajax处理web服务端的json数据，显示在devextreme框架的手机前端页面

【写此文章为我这一个多月来研究的知识打一个断点。对于刚毕业的我，我的技术知识是稀少的散状的，只能开发一个简单的系统，而且也并不会开发手机app。此番学习是我一个初级的技术总结，并且也开发了我对新知识的学习方法。只要是学习，能增强自身价值的，花多少时间都是有意义的。这过程中可以钻钻牛角，但钻不出来还是要多与人交流，勤学好问】

ajax处理web服务端的json数据，显示在devextreme框架的手机前端页面

相关推荐